title: CSS challenge, can I do this without introducing more HTML?
body: <p>Imagine I have any block or inline block with text in it. Like a paragraph or li or whatever. If that tag has the "separator" class, I want it to appear as follows:</p>
  
  <p>All content is centred (text-align:center; will suffice).
  Here's the tricky part: on either side of the centred content, a (vertically-centred) line appears.</p>
  
  <p>The following image illustrates my idea:</p>
  
  <p><img src="https://i.stack.imgur.com/KtSs9.png" alt="Approximate example of what I&#39;d like it to look like (although this is using text... &quot;------ SEPARATE ------&quot;"></p>
  
  <p><strong>If I have to introduce more HTML, then forget about it - not interested.</strong></p>
  
  <p>I'm a long time CSS user, but I can't figure this one out... Anyone else got an idea? As much as I love it, preferably no CSS3 (for work... can't use new stuff because of compatibility)..</p>
  
  <p>Example problem: <code>&lt;p class="separator"&gt;CENTRE ME&lt;/p&gt;</code></p>