title: How to add a border to only percentage of width of element, CSS Trick
body: <h2>The Issue...</h2>
  <p>Once again I am searching for a cool CSS trick to help me to achieve an effect whilst preventing the use of untidy HTML...</p>
  <p>The following image shows what I am trying to achieve, <em><strong>notice the top and bottom borders only stretching around 70% of the width...</strong></em></p>
  <p><img src="https://i.stack.imgur.com/bWebB.png" alt="Percentage Width Borders" /></p>
  <h2>A Starting Point</h2>
  <p>As a starting point I have created the above using what I would call 'untidy HTML' to add these dividers to the list.</p>
  <p>Here is my jsFiddle: <a href="http://jsfiddle.net/E93UE/" rel="noreferrer">http://jsfiddle.net/E93UE/</a></p>
  <p><em><strong>You will see I have <code>&lt;li class=&quot;divider&gt;&lt;!-- Divider --&gt;&lt;/li&gt;</code>, this is what I want to get rid of if possible</strong></em></p>
  <h2>My Question</h2>
  <p>So, if the above has not explained well enough, I would like to apply a border to a block element, but only show the border for a specific width of the whole element.</p>
  <p>Obviously this cannot be achieved using just <code>border:XXX</code>, it is likely to need some <code>:before</code> and <code>:after</code> selectors...</p>
  <h2>Possible Solutions...</h2>
  <p>I have had two thoughts of how this could be achieved, one is not too practical, and the other I am not too sure how to implement (these are just ideas):</p>
  <ol>
  <li>Set the width of the list element and give it <code>overflow:visible</code>, all elements within have <code>position:absolute</code> and then just apply margins to bring the elements out of the list box... (<em><strong>not a good fix, prefer my original</strong></em>)</li>
  <li>The other solution, which I am not too sure how to implement, may be the way to go. By apply two <code>:before</code> elements with <code>position:absolute</code> you could overlay the edges of each border (<em><strong>I think</strong></em>)</li>
  </ol>