Lines Before and After Text (h2) using CSS (or jQuery?)

Question

I'm trying to put lines before and after h2 texts, like this:

----- About Our Line -------------------

I found this post: CSS technique for a horizontal line with words in the middle

But the thing is I have a lot of h2s, so I can't set different widths for individual h2s.

Maybe there's a solution?

Do you mean all H2s when lines are added should have the same width? — Yuriy Galanter, Dec 14 '13 at 03:58
See this [question](http://stackoverflow.com/questions/19148992/2-lines-behind-headers-css) — Josh Crozier, Dec 14 '13 at 04:00
Why not this? http://stackoverflow.com/a/5214204/1388588 (http://jsfiddle.net/7jGHS/) — Bryan Elliott, Dec 14 '13 at 04:03
Josh's solution worked for me. I just changed the width to 100% and changed the margin of h2:before. Bryan's suggestion could work too, but I didn't want to add an extra span tag. Thanks everybody! — Jaeeun Lee, Dec 14 '13 at 04:21

score 0 · Answer 1 · answered Jan 28 '16 at 07:22

0



    h2:before, h2:after {
     content: '----------';
    }
    <div>
      <h2>About Our Line</h2>
    </div>




.h2:before, h2:after {
    content: '----------';
}

answered Jan 28 '16 at 07:22

Vivek B

1
1
3

While this seems to work, a few explanatory words would be helpful. – Benjamin W. Jan 28 '16 at 07:41

Lines Before and After Text (h2) using CSS (or jQuery?)

1 Answers1