Silent classes for pseudo elements as icon containers

pseudo-container.css

.foo, .bar {
  position: relative;
}

.foo:before, .bar:after {
  position: absolute;
  content: "";
  display: block;
}

.foo:before {
  width: 10px;
  height: 10px;
  top: 10px;
  left: 10px;
  background-image: url(foo.png);
}

.bar:after {
  width: 20px;
  height: 20px;
  top: 20px;
  right: 20px;
  background-image: url(bar.png);
}

pseudo-container.scss

%pseudo-icon-container {
  position: relative;
}

%pseudo-icon {
  position: absolute;
  content: "";
  display: block;
}

%pseudo-icon-before {
  @extend %pseudo-icon-container;

  &:before {
    @extend %pseudo-icon;
  }
}

%pseudo-icon-after {
  @extend %pseudo-icon-container;

  &:after {
    @extend %pseudo-icon;
  }
}


.foo {
  @extend %pseudo-icon-before;

  &:before {
    width: 10px;
    height: 10px;
    top: 10px;
    left: 10px;
    background-image: url(foo.png);
  }
}

.bar {
  @extend %pseudo-icon-after;

  &:after {
    width: 20px;
    height: 20px;
    top: 20px;
    right: 20px;
    background-image: url(bar.png);
  }
}