less Extend Pseudo Elements

Example

The following Less

.addDivider::before{
  content: "";
  height: 80%;
  background: white;
  width: 1px;
  position: absolute;
  top: 10%;
  left: 0;    
}

.nav-bar{
  background: black;
  display: flex;
  flex-direction: row;
  width: 400px;
  .nav-item{
    color: white;
    width: 100px;
    list-style-type: none;
    position: relative;
    text-align: center;
    padding: 0;
    &:not(:first-child){
      &::before{
        &:extend(.addDivider::before);
      }
    }
  }
}

Will compile into the following CSS

.addDivider::before,
.nav-bar .nav-item:not(:first-child)::before {
  content: "";
  height: 80%;
  background: white;
  width: 1px;
  position: absolute;
  top: 10%;
  left: 0;
}
.nav-bar {
  background: black;
  display: flex;
  flex-direction: row;
  width: 400px;
}
.nav-bar .nav-item {
  color: white;
  width: 100px;
  list-style-type: none;
  position: relative;
  text-align: center;
  padding: 0;
}

Using the following HTML

<div class="nav-bar">
  <div class="nav-item">one</div>
  <div class="nav-item">two</div>
  <div class="nav-item">three</div>
  <div class="nav-item">four</div>
</div>

Our result is

We have defined a default divider pseudoclass which we have added into a nested element! The white borders can now be added to other elements using extend.