title: SCSS extending :after with :before
body: <p>I was wondering whether it is possible to extend pseudo elements with another pseudo element. I tried the following, but it didn't work.</p>
  
  <pre><code>li {
      float: left;
      text-align: center;
      list-style-type: none;
      position: relative;
      padding: 12px 6px 0 6px;
      &amp;:before {
          content: "";
          position: absolute;
          top: 0;
          right: 50%;
          border-top: 1px solid #ccc;
          width: 50%;
          height: 12px;
      }
      &amp;:after{
          @extend &amp;:before;
          right: auto;
          left: 50%;
          border-left: 1px solid #ccc;
      }
  }
  </code></pre>