1

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.

Community
  • 1
  • 1
demo
  • 6,038
  • 19
  • 75
  • 149

5 Answers5

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/

Stuart
  • 1,168
  • 3
  • 10
  • 17
1

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.

somethinghere
  • 16,311
  • 2
  • 28
  • 42
1

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;
}
G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
0

Try <hr/>

FIDDLE DEMO

hr {
    width:100px;
    border:2px solid;
}
h5{
    text-align:center;
}
Richa
  • 3,261
  • 2
  • 27
  • 51
0

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;
}
fabric1601
  • 91
  • 1
  • 8
  • I think he was looking for ------ TEXT -------, not | TEXT | - His link actually shows an example. He could've explained it better, though. – somethinghere Aug 22 '14 at 12:04
  • I see...in that case please disregard my post, I thought he is looking for vertical lines – fabric1601 Aug 22 '14 at 12:05