Add line to the sides of some text [duplicate] - html

Question

This question already has answers here:
Add centered text to the middle of a horizontal rule [duplicate]
(33 answers)
Closed 8 years ago.
How to add lines to the sides of text, create something like text separator but whithout background for text.
<h5>Some text goes here</h5>
In this post CSS challenge, can I do this without introducing more HTML? all solutions are with text background.
In my case text is on the image, so text background is awful.

Answer 1

Could this not be done even more minimally these days with the :before & :after selectors?
h5:before, h5:after{
content: '';
width: 2em;
height: 2px;
padding: 0;
margin-right: 5px;
background-color: #000000;
display: inline-block;
position: relative;
bottom: 3px;
}
h5:after{
margin-left: 5px;
margin-right: 0;
}
Here’s a fiddle: http://jsfiddle.net/3616he4y/2/

Answer 2

Your best solution is probably to add another element. You can't do this without that. You could try:
<h3><span>TEXT</span></h3>
h3 {
background-image: url(single-pixel-img.gif) 50% 50% repeat-x;
text-align: center;
padding: 0 20px;
}
h3 span {
background: #fff;
display: inline-block;
}
Then you can still add some padding to the span etc... The single line image could be a 1x1 black gif that'll add almost nothing to your pageload. It's simple, elegant and adds only a couple more lines of code.

Answer 3

to me, the pseudo elements here are very usefull once again and as the link to csstricks explains, it is not a big deal to set.
I'd rather use the static position , cause it can have some advantage once text breaks into a few lines.
Examples behavior/DEMO :
HTML
<h1>text & strikes</h1>
<h1>text <br/>& </br/>strikes</h1>
<h1><span>text <br/>& </br/>strikes</span></h1><!-- see demo to find out <span> purpose */
CSS
h1 {
text-align:center;
overflow:hidden;/* hide parts of pseudo jumping off the box */
text-shadow:0 0 1px white;/* increase visibility of text if bg is dark too */
background:url(http://lorempixel.com/100/600/abstract);
}
h1:before,
h1:after {
content:'';
display:inline-block;
height:0.06em;
width:100%;/* could be a little less*/
box-shadow:/* looks like text */
inset 0 0 0 20px,
0 0 1px white
;
vertical-align:middle;
}
h1:before {
margin-left:-100%;/* width is virtually reduce to zero from the left side to stick to text coming next */
margin-right:0.5em;
}
h1:after {
margin-right:-100%;/* width is virtually reduce to zero from the right side to stick to text */
margin-left:0.5em;
}
span {
display:inline-block;/* holds any line breaks */
vertical-align:middle;
}

Answer 4

Try <hr/>
FIDDLE DEMO
hr {
width:100px;
border:2px solid;
}
h5{
text-align:center;
}

Answer 5

You can use borders:
h5 {
border-right: 1px solid #dadada;
border-left: 1px solid #dadada;
}
If you want to have space between the lines and the text, you can add padding left and right to the styling:
h5 {
border-right: 1px solid #dadada;
border-left: 1px solid #dadada;
padding: 0 5px;
}
If you want to use the h5 as a nav item and you want to separate it from the rest of the items (the reason you need the divider) you can put the border only on the right, and every next item will inherit the settings.
For the last item, obviously you would want to remove the border right as it doesn't have anything after it, so you can do:
h5 {
border-right: 1px solid #dadada;
}
h5:last-child {
border-right: none;
}