SCSS de s'étendre :après :avant

Je me demandais si il est possible d'étendre éléments pseudo avec un autre pseudo-élément. J'ai essayé le suivant, mais il ne fonctionne pas.

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;
    }
}
Connexes: stackoverflow.com/questions/17181837/...

OriginalL'auteur Bram Vanroy | 2014-10-13

  1. 9

    Une manière que vous pourriez faire serait de créer un espace réservé. Comme..

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

    OriginalL'auteur Kris Hollenbeck