CSS Horizontal Heading Lines

Estimated reading time: 10 minutes
Nice CSS Horizontal Lines
Project Synopsis Creating nice looking horizontal heading lines can take a lot of tinkering around with, whether they are simple or contain some type of animation like the ones featured above. Below is a SASS mixin to help jump start the process. The mixin sets up very basic heading lines that lie on either side on an element and the rest is up to you to extend. The goal was to keep it as flexible as possible. I’m using heading tags in this example and demo, but you can use <div> tags or whatever you’d like.

View Demo
First, the HTML Markup we need is below:
<div class="wrapper">

   <span class="heading-line--container">
      <span class="heading-line--left"></span>
          <h2>Something Important</h2>
      <span class="heading-line--right"></span>
    </span>

</div>
I use Compass on a lot of projects, and happen to use it here too. You could always modify the mixins below to remove the need for it, and make it more accessible. But I use it since I’m lazy. The mixin accepts only two arguments, side and word-padding.
  • $side: Which side of the heading to edit. "both" (default) , "left" or "right"
  • $word-padding: The horizontal spacing between the word and the lines. A unit of measure.(20px,2em, etc.)
The mixin takes advantage of SASS extends in the case that multiple heading-lines are created. There is also one helper mixin to create symmetrical lines on either side. It will mirror a line and should be used as @include mirror("left") which would take the left heading-line and change it to be a mirror image of itself.
@import "compass";
@import "compass/reset";

body {
    font-family: "Raleway", Arial, sans-serif;
    font-size: 1.5em;
}

// for each new example, create a new block
[class^=example-] {
    position: relative;
    overflow: hidden;
    text-align: center;
    margin: 0 auto;
    padding: 4em 0;
    border-top: 2px dotted #67b7e7;
    background: #EEE;
    h1, h2, h3, h4, h5, h6 {
        margin: 0;
    }
}

/*--------------------*/

%heading-line--sides {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 250px; // customize
    height: 2px; // customize
    background: #999; // customize
}

%heading-line--container {
    padding: 0 2em;
    width: auto;
    float: none;
    position: relative;
    display: inline-block;
    top: 0;
    bottom: 0;
    margin: 0;
    line-height: 1;
}

%heading-line--left {
    right: 100%;
}

%heading-line--right {
    left: 100%;
}

// vertically aligns pseudo "header-line" elements
%pseudo--align {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
}

@mixin edit-heading-line($side: both, $word-padding: null) {
    .heading-line--container {
        @extend %heading-line--container;

        @if $word-padding != null {
            padding: 0 $word-padding;
        }
    }

    @if index("left", $side) {
        .heading-line--container .heading-line--left {
            @extend %heading-line--sides;
            @extend %heading-line--left;
            @content;
        }

        .heading-line--container .heading-line--right {
            display: none;
        }
    }

    @else if index("right", $side) {
        .heading-line--container .heading-line--right {
            @extend %heading-line--sides;
            @extend %heading-line--right;
            @content;
        }
    }

    @else {
        .heading-line--container .heading-line--left,
        .heading-line--container .heading-line--right {
            @extend %heading-line--sides;
            @content;
        }

        .heading-line--container .heading-line--left {
            @extend %heading-line--left;
        }

        .heading-line--container .heading-line--right {
            @extend %heading-line--right;
        }
    }
}

@mixin mirror($side: left) {
    @include edit-heading-line(#{$side}) {
        @include transform(scale(-1, 1));
    }
}



Great, there she is. So now to use it in its most basic example we would just apply it to our wrapper class
.wrapper {
    @include edit-heading-line;
}

Nothing particularly nice looking, but it gives us a great base to start experimenting with.
Basic CSS Horizontal Heading Lines Sample If you are looking to keep you HTML markup nice and clean, this mixin may not be the best route to go. If you’re looking for more basic CSS horizontal heading line effects, it would be best to simply create a container and just place anh2 tag in it like shown below. It get’s the same job done, but’s it’s limited in its versatility.
<div class="example-6">

  <h2>This is Mega Basic Heading Lines, Markup is So Clean</h2>

</div>
And our CSS for .example-6
/*
  A more basic, but much cleaner example as far as HTML markup is concerned.
  Also, less bloated CSS selectors.
*/
.example-6 h2 {
  display: inline-block;
  width: auto;
  position: relative;
}
.example-6 h2:before, .example-6 h2:after {
  content: "";
  position: absolute;
  width: 300px;
  height: 2px;
  background: #676767;
  left: 105%;
  top: 0;
  bottom: 0;
  margin: auto;
}
.example-6 h2:after {
  left: auto;
  right: 105%;
}
So we see that this creates the same effect as the mixin(image below), but our markup is cleaner and our CSS isn’t so bloated. Basic and Very Clean CSS Horizontal Heading Lines Sample It’s a matter of how complex your design might be or how clean you want/need your markup to be, Outweigh the benefits and drawbacks of both. Like everything else, there are a million and one ways to accomplish the same task.
View Demo
This CodePen demonstrates some of the possibilities! Scroll down to view all examples or fork it on CodePen.

See the Pen wMgXdp by Christopher James Curtin (@ccurtin) on CodePen.

Posted In: Tutorials     ||      Tags: CSS-SASS-SCSS