I have below mixin created in mixins.scss file. working example of cheveron-circle-right as per codepen

@mixin custom-cheveron-cirle-right {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    margin-left: 1.5em;
    background-color:#0069AA;
    position:relative;
    &::after {
      position:absolute;
      top:4px;
      left:3px;
      width: 3px;
      height: 3px;
      border-top: 3px solid #fff;
      border-right: 3px solid #fff;
      transform: rotate(45deg);
    }
  }

Above mixins I am appending in existing li:before node as below

 li:before { @include custom-cheveron-cirle-right; 
    content:''; 
    float: left;
     margin-left: -.75rem;
     padding: .185rem 0 0 0;
     font-size: .75rem;
     transform: rotate(0.001deg);
 }

but when I am rendering it just does the rendering of the circle and does not render arrow inside circle, the basic purpose here is not to use the font-awesome library and need to have our own custom icon in place which are created using CSS and mixins.

CodePudding user response：

You have two problems:

• you are missing content:''; in the ::after inside mixin
• you are including your mixin (@include) inside ::before, instead of the parent, which then generate invalid CSS li::before::after

Note:: changed the li to div to match your codepen HTML

Here is a codepen

@mixin custom-cheveron-cirle-right {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  margin-left: 1.5em;
  background-color: #0069aa;
  position: relative;
  &::after {
    content: "";
    position: absolute;
    top: 4px;
    left: 3px;
    width: 3px;
    height: 3px;
    border-top: 3px solid #fff;
    border-right: 3px solid #fff;
    transform: rotate(45deg);
  }
}

div {
  @include custom-cheveron-cirle-right;
  &::before {
    content: "";
    float: left;
    margin-left: -0.75rem;
    padding: 0.185rem 0 0 0;
    font-size: 0.75rem;
    transform: rotate(0.001deg);
  }
}