CSS Gradient Bottom Border

CSS-Gradient-Bottom-Border.markdown

CSS Gradient Bottom Border

A Pen by DriftwoodJP on CodePen.

License.

index.haml

%h3.h__linear Lorem ipsum dolor sit amet

.h__linear--gradient
  %h3 Lorem ipsum dolor sit amet

style.scss

@import "compass/css3";
// Compass for linear-gradient

@mixin bd-gradient(
    $bd-with: 4px,
    $color-from: #0083f6,
    $color-to: null
  ) {
  position: relative;
  margin-bottom: $bd-with;
  &:before, &:after {
    content: "";
    position: absolute;
    bottom: $bd-with * -1;
    left: 0; }
  &:after {
    right: 0;
    height: $bd-with;
    background-color: $color-from;
    @if $color-to != null {
      @include background-image(linear-gradient(to right, $color-from, $color-to)); } }
}




.h__linear {
  @include bd-gradient();
}
.h__linear--gradient {
  @include bd-gradient($bd-with: 8px, $color-from: #0083f6, $color-to: #5dcdfa);
}