title: Pseudo elements and button tag: how to prevent the pseudo element from being clickable?
body: <p>I've got a button (<code>&lt;button&gt;</code> tag, but rendered like a link) inserted at the end of a line of text.  I need to make a clear separation between the button and the text, so I'm using a <code>:before</code> pseudo element with a <code>content: "—";</code> property to achieve that.  So far so good.</p>
  
  <p>Here is an example: <a href="http://jsfiddle.net/Anto/UPjQL/" rel="nofollow">http://jsfiddle.net/Anto/UPjQL/</a></p>
  
  <p>The problem is that the content of the pseudo element behaves just like the button itself: when hovering it, the <code>default</code> cursor becomes a <code>pointer</code> cursor and the element is underlined.  That makes sense, but I'd like to prevent that behavior and let it appear just like a regular text char.</p>
  
  <p>Any idea ?</p>
  
  <hr>
  
  <p>I <em>know</em> that wrapping the button inside, say, a <code>span</code> element and <em>then</em> giving the <code>:before</code> properties to that wrapper would be a more elegant solution, but in this case I can't afford it.</p>