title: Setting the border-width of a :after pseudo-element based on the parent element's width
body: <p>First, I realize pseudo-elements <a href="https://stackoverflow.com/questions/5041494/manipulating-css-before-and-after-pseudo-elements-using-jquery">aren't part of the DOM</a> and thus can't be targeted with jQuery. I'm wondering if perhaps there's another way (pure css, or some creative use of jQuery) to set a property of an :after pseudo-element (border-width, in this case) to be dependent on the parent element's width.</p>
  
  <p>I'm styling a navigation menu using the technique described in <a href="http://www.yuiblog.com/blog/2010/11/22/css-quick-tip-css-arrows-and-shapes-without-markup/" rel="nofollow noreferrer">this article</a>, but would like to have the triangular shaped part be the full width of the navigation element:</p>
  
  <p><img src="https://i.stack.imgur.com/LKn0Q.png" alt="nav menu example"></p>
  
  <p>However, the navigation elements won't all or always be the same width, thus the need to set the border-width based on the parent element's width. Any suggestions on how to accomplish this?</p>
  
  <p>Edit: added a jsfiddle demo: <a href="http://jsfiddle.net/bcAQc/1/" rel="nofollow noreferrer">http://jsfiddle.net/bcAQc/1/</a></p>
  
  <p><em>Note: for some reason, I had to just different values for top and left on the :after pseudo element in jsfiddle than on my site. On my site, and in the example article I linked above, top is set to 100% and left is set to 50%.</em></p>