Horizontal styling line on each side of headings
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, such as the links in this link:
In the blog above, the sidebar titles and the "Share this article" header have the desired effect which I am looking for but cannot figure out how to get it. I know the basics of HTML and CSS, so it might be something I'm just forgetting or haven't learned yet.
Also, is there a way to take this type of styling to the next level by adding more unique line types (like long curly lines) to the CSS?
Thanks in advance!
source to share
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>
source to share
Using your browser developer tools, check the elements span
containing these headers. You will :before
also see :after
CSS3 selectors that use some positioning / border style.
Can you use other kinds of lines? Sure - CSS3 will allow you to use all sorts of things, but the list is probably too long to list here on SO.
source to share