Add a line that strikes through the title

I am sure you have seen web designs that are out of the norm like that:

strike-through

How can we add a line behind the headings if not using background image? I have played around with a few different methods unfortunately the lines always go out of alignment when testing in another browser. I have discovered the perfect way to do it that is supported by multiple browsers including Safari and Chrome:

Insert this line in your HTML/PHP file. Replace the class name and heading text.

<div class="home-section"><h3 class="strike">HOME</h3></div>

Add the below to your CSS file. Again, change the class name to match your html code.

.home-section {
margin: 20px 0;
display: inline-block;
width: 100%;
overflow: hidden;
}
h3.strike {
display: table;
white-space: nowrap;
letter-spacing: 3px;
text-transform: uppercase;
}
h3.strike:before, h3.strike:after {
border-top: 3px solid #000;
content: '';
display: table-cell;
position: relative;
top: 10px;
width: 50%;
}
h3.strike:before {
right: 30px;
}
h3.strike:after {
left: 20px;
}

Leave a comment below if you have also found a different method to do the same!

Leave a Reply

Your email address will not be published. Required fields are marked *