SCSS extending :after with :before
31,196
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;
}
}
Related videos on Youtube
Author by
Bram Vanroy
Currently working on machine translation and translation difficulty. I'm also interested in a couple of other things, such as linguistics; natural language processing; artificial intelligence, deep learning; music, drums and bass more specifically; design & UI.
Updated on August 04, 2020Comments
-
Bram Vanroy almost 4 years
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; } }