偽元素設(shè)置 | ，使其居中
/*使用偽元素制作導(dǎo)航列表項(xiàng)分隔線*/
.nav li:after{
? ? padding-left:10px;
? ? content:"|";
? ? color:#B64B41;
? ? text-shadow:none;
}
/*刪除第一項(xiàng)和最后一項(xiàng)導(dǎo)航分隔線*/
.nav li:last-child::after{
? ?content:"";
?}
我是不斷調(diào)整after以及.nav li的padding，才使得勉強(qiáng)看上去|在字中間居中。
有沒有什么辦法可以標(biāo)準(zhǔn)化這個過程。
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);
}/*刪除第一項(xiàng)和最后一項(xiàng)導(dǎo)航分隔線*/
.nav li:last-child::after{
? ?????????content:"";
?}
2021-01-18
.nav li:after{
? ? content: '';
? ? position: absolute;
? ? height:20px;
? ? width: 1px;
? ? top:0;
? ? bottom:0;
? ? ? ? left: 0;
? ? ? ? ? ? margin: auto auto;
? ? background: #999;
}
2020-02-01
.nav li::after{
? ? ? position:absolute;
? ? ? content:'';
? ? ? right:0;
? ? ? top:50%;
? ? ? transform:translateY(-50%);
? ? ? background-color:#ccc;
? ? ? width:1px;
? ? ? height:12px;
? }
? ? ? ? /*刪除第一項(xiàng)和最后一項(xiàng)導(dǎo)航分隔線*/
.nav li:last-child::after{
? ? content:'';
? ? width:0;
}
2020-02-01
.nav?li::after{ ??????position:absolute; ??????content:''; ??????right:0; ??????top:50%; ??????transform:translateY(-50%); ??????background-color:#ccc; ??????width:1px; ??????height:12px; ??}????????/*刪除第一項(xiàng)和最后一項(xiàng)導(dǎo)航分隔線*/ .nav?li:last-child::after{ ????content:''; ????width:0; }2019-09-03
/*使用偽元素制作導(dǎo)航列表項(xiàng)分隔線*/
.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;
? ? ? ? }
? ? ? ? /*刪除第一項(xiàng)和最后一項(xiàng)導(dǎo)航分隔線*/
????????.nav li:last-child::after{
? ? ? ? ? ?content:"";
? ? ? ? }
2019-04-15
直接設(shè)置?content:"";position :absolute;top:14px;
就可以了，第一個設(shè)置位置絕對，第二個距離頂部14px，大概就是居中