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 line, eg to form something like:

----- Alpha - Beta - Gamma -----

This is what I have so far:

JSfiddle

Here, I have the demo working fine BUT it requires a background to work, this isn't a good solution since my background on my site is not a static single color (it's a fixed picture which doesn't move when you scroll).

JSfiddle

So what I need to do is basically fix the first version to work like the second version but without using a background.

I thought of doing something like:

<div class="content">
  <div class="line"></div>
  <div class="line-text">Some</div>
  <div class="line-gap"></div>
  <div class="line-text">Text</div>
  <div class="line-gap"></div>
  <div class="line-text">In a Line</div>
  <div class="line"></div>
</div>

Where .line would be an auto width (to fill the left and right sides) and .line-gap would just be say 10px to show the line between the text.

EDIT/UPDATE

Here is another demo, but I would prefer something that is more automatic rather than trying to set the position absolutely because it is for a responsive fluid design...

JSfiddle

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;
}