伪元素设置 | ，使其居中

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

.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

源自：十天精通CSS3 5-5

关注问题我要回答

3389

操作

收起

6 回答

_Doogie 回答被采纳 +2 积分
2019-06-08

.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 回复有任何疑惑可以回复我~

#1

让我们结伴而行

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

2022-07-28 回复有任何疑惑可以回复我~

恰逢暮雪
2021-01-18

.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

.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

.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 回复有任何疑惑可以回复我~

慕数据7136769
2019-09-03

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

.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

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

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

0 回复有任何疑惑可以回复我~

#1

绝尘kinoko 提问者

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

2019-04-16 回复有任何疑惑可以回复我~

举报

0/150

提交

取消

十天精通CSS3

参与学习 242548 人
解答问题 2623 个

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

本课相似问答

1 回答伪元素那为什么要设置绝对定位？

2 回答怎么使用伪元素制作分割线啊，没学过伪元素啊，

1 回答什么是伪元素？为什么前面没有讲伪元素？这里却要用伪元素

2 回答伪元素设置了分割线为什么不起作用

7 回答伪类与伪元素的区别？

搜索更多本课相关问答

伪元素设置 | ，使其居中

我要回答关注问题

意见反馈帮助中心 APP下载