CodePen

HTML

            
              <h1 class="default">default</h1>

<h1>heading level 1</h1>

<h2>heading level 2</h2>

<h3>heading level 3</h3>

<h4>heading level 4</h4>
            
          
!
via HTML Inspector

CSS

            
              @mixin scut-side-lined (
  $height: 1px,
  $space: 0.5em,
  $color: black,
  $style: solid,
  $v-adjust: false,
  $double: false,
  $fade: false
) {

  display: block;
  overflow: hidden;
  text-align: center;
  @if $fade != false {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  &:before,
  &:after {
    content: "";
    display: inline-block;
    vertical-align: middle;
    position: relative;
    width: 50%;

    border-top-style: $style;
    border-top-width: $height;

    @if $color != inherit {
      border-top-color: $color;
    }

    @if $v-adjust != false {
      bottom: $v-adjust;
    }

    @if $double != false {
      height: $double;
      border-bottom-style: $style;
      border-bottom-width: $height;
      @if $color != inherit {
        border-bottom-color: $color;
      }
    }
  }

  &:before {
    right: $space;
    margin-left: -50%;
  }
  &:after {
    left: $space;
    margin-right: -50%;
  }

  @if $fade != false {
    &:before, &:after {
      border: none;
      width: calc(100% / 3);
      height: $height;
    }
    &:before {
      right: 0;
      margin-right: $space;
      background-image: linear-gradient(to left, $color, transparent 65%);
    }
    &:after {
      left: 0;
      margin-left: $space;
      background-image: linear-gradient(to right, $color, transparent 65%);
    }
  }

}
h1 {
  @include scut-side-lined($color: blue, $fade: true);
}

h2 {
  @include scut-side-lined($color: green, $fade: true);
}

h3 {
  @include scut-side-lined($color: red, $fade: true);
}

h4 {
  @include scut-side-lined($color: orange, $fade: true);
}

.default {
  @include scut-side-lined($fade: true);
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................