Bram Vanroy Bram Vanroy - 4 months ago 22
Sass (Sass) Question

SCSS extending :after with :before

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;
}
}

Answer

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;
    }
}