CSS SCSS 扩展 :after 和 :before
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26343343/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-30 02:39:58 来源:igfitidea点击:
SCSS extending :after with :before
提问by Bram Vanroy
I was wondering whether it is possible to extend pseudo elements with another pseudo element. I tried the following, but it didn't work.
我想知道是否可以用另一个伪元素扩展伪元素。我尝试了以下方法，但没有奏效。
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;
}
}
回答by Kris Hollenbeck
One way you could do it would be to create a placeholder. Like so..
一种方法是创建一个占位符。像这样..
%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;
}
}
