I am sure you have seen web designs that are out of the norm like that:
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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.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!