Orange Pulley Blog

Tech Things Worth Writing About

I’ve written about adding a simple line after using the :after pseudo class before, but this effect takes that one step further incorporating the :before pseudo class, as well to get this result:

The basic concept is to:

  1. Use the background property to set the color of your ‘line’
  2. Use height to set the ‘height’ of the line
  3. Apply both to :after and :before
  4. Absolute position both propeties to the bottom left

I had to also relatively inline-block the h1 tag, but that may be something I’m doing wrong here.

Here’s a video:

CSS USED:

.fancierTitle h1 {
 position: relative;
 display: inline-block;
 height: 60px;
 padding: 10px 0;
}
.fancierTitle h1:after{
 content: " ";
 width: 15%;
 height:8px;
 display: block;
 background-color: #4e7ac7;
 position: absolute;
 bottom: 0;
 left: 0;
}
.fancierTitle h1:before {
 content: " ";
 width: 55%;
 height:8px;
 display: block; 
 background: #eee;
 position: absolute;
 bottom: 0;
 left: 0;
}