Css SCS扩展:后与:前
我想知道是否可以用另一个伪元素扩展伪元素。我尝试了以下方法,但没有成功Css SCS扩展:后与:前,css,sass,css-selectors,Css,Sass,Css Selectors,我想知道是否可以用另一个伪元素扩展伪元素。我尝试了以下方法,但没有成功 li { float: left; text-align: center; list-style-type: none; position: relative; padding: 12px 6px 0 6px; &:before { content: ""; position: absolute; top: 0;
li {
float: left;
text-align: center;
list-style-type: none;
position: relative;
padding: 12px 6px 0 6px;
&:before {
content: "";
position: absolute;
top: 0;
right: 50%;
border-top: 1px solid #ccc;
width: 50%;
height: 12px;
}
&:after{
@extend &:before;
right: auto;
left: 50%;
border-left: 1px solid #ccc;
}
}
一种方法是创建一个占位符。像这样
%pseudo-block {
content: "";
position: absolute;
top: 0;
right: 50%;
border-top: 1px solid #ccc;
width: 50%;
height: 12px;
}
li {
float: left;
text-align: center;
list-style-type: none;
position: relative;
padding: 12px 6px 0 6px;
&:before {
@extend %pseudo-block;
}
&:after{
@extend %pseudo-block;
right: auto;
left: 50%;
border-left: 1px solid #ccc;
}
}
相关的: