CSS Overlaying a Horizontal Line

CSS-Overlaying-a-Horizontal-Line.markdown

CSS Overlaying a Horizontal Line

A Pen by DriftwoodJP on CodePen.

License.

index.haml

%h1.horizontal
  %span Lorem ipsum dolor

%p.horizontal--left
  %span Lorem ipsum dolor.

style.scss

@import "compass/css3";
@mixin overlay-hrline(
    $color: #ccc,
    $bg-color: #fff,
    $align: center,
    $padding: 0 0.5em
  ) {
  position: relative;
  text-align: $align;
  &:before {
  content: "";
  display: block;
  border-top: solid 1px $color;
  // or
  // background: $color;
  // height: 1px;
  position: absolute;
  width: 100%;
  top: 50%;
  z-index: 1; }
  span {
    background: $bg-color;
    padding: $padding;
    position: relative;
    z-index: 2; }
}




.horizontal {
  @include overlay-hrline($padding: 0 1em);
}
.horizontal--left {
  @include overlay-hrline($align: left);
}