SCSS extending :after with :before

Question

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 1

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