Horizontal Line Styling on Each Side of Titles

Question

I am working on a Wordpress blog, and I am trying to figure out how to add horizontal lines on each side of some of my titles like the ones in this link:

http://falive.jegtheme.com/?slider=highlightslider&homelayout=normal&homesidebar=true&layout=full&header=1&sticky=true

In the blog above, titles in the sidebar, and the 'share this article' title has the desired effect that I am looking for, but can't seem to figure out how to get it. I know the basics of HTML and CSS, so this could be something that I am simply overlooking or just haven't learned yet.

Also, is there a way to take this type of styling to the next level by adding more unique types of lines (like long curly lines) through CSS?

Thanks in advance!

Answer 1

use :before or :after

Example 1:

h2{        
    padding: 0 20px;        
    text-align: center;
}
h2:before,
h2:after{
    content: '';    
    width: 150px;    
    height: 1px;
    margin: 0 10px;
    background: #ccc;  
    display: inline-block;
    vertical-align: middle;   
}

<h2>title</h2>
<h2>title title title</h2>

Example 2

div{
    text-align: center;
}
h2 {
    padding: 0 20px;
    position: relative;
    text-align: center;
    display: inline-block;
}
h2:before, 
h2:after {
    content:'';    
    width: 100%;
    position: absolute; top: 50%;
    height: 1px;    
    background: #ccc;    
    transform: translateY(-50%);
}
h2:before{
    right: 100%;
}
h2:after{
    left: 100%;
}

<div>
<h2>title</h2>
<br>
<h2>title title title</h2>
</div>

Answer 2

Using your browser's developer tools, inspect the span elements containing those titles. You'll see :before and :after CSS3 selectors in which some positional/border styling is used.

Can you use other kinds of lines? Sure -- CSS3 would allow you to use a wide variety of things, but the list is probably too long to list here on SO.