伪元素设置 | ，使其居中

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

伪元素设置 | ，使其居中

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

.nav li:after{

padding-left:10px;

content:"|";

color:#B64B41;

text-shadow:none;

}

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

.nav li:last-child::after{

content:"";

}

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

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

提问者：绝尘kinoko 2019-04-15 16:37

个回答

_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:"";
}
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;
}

0
比哑巴吃黄连还要苦

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;
}

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:"";
}

0
暮雪之寒

2019-04-15 22:14:46

直接设置 content:"";position :absolute;top:14px;
就可以了，第一个设置位置绝对，第二个距离顶部14px，大概就是居中

0