绝尘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,才使得勉强看上去|在字中间居中。
有没有什么办法可以标准化这个过程。
.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:"";
}
.nav li:after{
content: '';
position: absolute;
height:20px;
width: 1px;
top:0;
bottom:0;
left: 0;
margin: auto auto;
background: #999;
}
.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;
}
.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; }
/*使用伪元素制作导航列表项分隔线*/
.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:"";
}
直接设置 content:"";position :absolute;top:14px;
就可以了,第一个设置位置绝对,第二个距离顶部14px,大概就是居中
十天精通CSS3
242554 学习 · 2623 问题
相似问题