Before a pseudo-element in Chrome

Question

It seems to me that Chrome does not consider the "before" pseudo-element as part of the element. More precisely, I have a CSS definition

.myclass:before{content:"A";} 

and HTML code

 <a href="blah" class="myclass">B</a> 

In Chrome, the result is an “AB” hyperlink, but only “B” is actually clickable. In Firefox and Opera, the whole “AB” is a link, and my reading of the CSS standard indicates that Chrome is wrong here.

Do I think this is a Chrome bug? Is there a simple and clear workaround?

Answer 1

It seems that you can get around it with:

 .myclass { display: inline-block } 

http://jsfiddle.net/SUKYw/

Looks like a Chrome bug - Safari doesn't have the same problem.