Create vertically centered horizontal line to fill width of title with padding in CSS

Question

I basically need to create a title that has a vertically centered horizontal line filling up the width (left and right) but that also supports multiple text elements on the same

Answer 1

If you don't want to use a background, you could do a little trick using the :before and :after properties.

Here's the example jsFiddle, you can change the content/properties to whatever you like and it does what you've asked.

Example below.

HTML:

<ul>
<li class="sub-menu-item" ><a href="#">Example</a></li>
<li class="sub-menu-item" ><a href="#">Example</a></li>
</ul>

CSS:

li.sub-menu-item:before,  li.sub-menu-item:after {
    content: "\2014 \2014"
}

li { 
    display:inline-block;
}