伪元素设置 | ,使其居中

来源:5-5 CSS3背景 制作导航菜单综合练习题

绝尘kinoko

2019-04-15 16:37

/*使用伪元素制作导航列表项分隔线*/

.nav li:after{

    padding-left:10px;

    content:"|";

    color:#B64B41;

    text-shadow:none;

}

/*删除第一项和最后一项导航分隔线*/

.nav li:last-child::after{

   content:"";

 }

我是不断调整after以及.nav li的padding,才使得勉强看上去|在字中间居中。

有没有什么办法可以标准化这个过程。

写回答 关注

6回答

  • _Doogie
    2019-06-08 17:49:40
    已采纳

    .nav li:after{

                position:absolute;

                content:"|";

                right:0;

                top:0;

                color:#fff;

                text-shadow:0 0 0 rgba(0,0,0,.5);

    }/*删除第一项和最后一项导航分隔线*/

    .nav li:last-child::after{

               content:"";

     }



    让我们结伴而...

    text-shadow:0 0 0 rgba(0,0,0,.5);这句有没有都没有什么关系吧?

    2022-07-28 14:49:18

    共 1 条回复 >

  • 恰逢暮雪
    2021-01-18 15:55:10

    .nav li:after{

        content: '';

        position: absolute;

        height:20px;

        width: 1px;

        top:0;

        bottom:0;

            left: 0;

                margin: auto auto;

        background: #999;

    }


  • 比哑巴吃黄连还要苦
    2020-02-01 20:02:35

    .nav li::after{

          position:absolute;

          content:'';

          right:0;

          top:50%;

          transform:translateY(-50%);

          background-color:#ccc;

          width:1px;

          height:12px;

      }

            /*删除第一项和最后一项导航分隔线*/

    .nav li:last-child::after{

        content:'';

        width:0;

    }


  • 比哑巴吃黄连还要苦
    2020-02-01 20:00:31
    .nav li::after{	      position:absolute;	      content:'';	      right:0;	      top:50%;	      transform:translateY(-50%);	      background-color:#ccc;	      width:1px;	      height:12px;	  }        /*删除第一项和最后一项导航分隔线*/		.nav li:last-child::after{		    content:'';		    width:0;		}


  • 慕数据7136769
    2019-09-03 23:22:13

    /*使用伪元素制作导航列表项分隔线*/

    .nav li:after{

                position:absolute;

                content:"|";

                height:50%;

                width:1px;

                right:0;

                top:25%;

                color:#f65f57;

                background-image:linear-gradient(to top,#f65f57,#c05650,#f65f57);

                text-shadow:0 0 0 #f65f57;

            }

            /*删除第一项和最后一项导航分隔线*/

            .nav li:last-child::after{

               content:"";

            }


  • 暮雪之寒
    2019-04-15 22:14:46

    直接设置 content:"";position :absolute;top:14px;

    就可以了,第一个设置位置绝对,第二个距离顶部14px,大概就是居中

    绝尘kino...

    不是垂直居中,是水平;我这个处理没法调整|的长度,默认就是垂直居中的

    2019-04-16 15:21:48

    共 1 条回复 >

十天精通CSS3

本课程为CSS3入门教程,深刻详解CSS3知识让网页穿上绚丽装备

242554 学习 · 2623 问题

查看课程

相似问题