Horizontal Line Styling on Each Side of Titles - html

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.