SCSS扩展：之后：之前

Question

我想知道是否可以使用另一个伪元素扩展伪元素。我尝试了以下方法，但它没有用。

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

你可以做的一种方法是创建一个占位符。像这样 ..

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