Possible to make a:after/before pseudo elements clickable as part of the link?

html css google-chrome pseudo-element
Catskul picture Catskul · Aug 15, 2011 · Viewed 54.6k times · Source

pseudo elements a:after a:before allow you to add text that appears to be part of the link. However, I can't seem to figure out a way to make that portion clickable as part of the link.

For example the following css shows the url afterward:

  a:after {
     content: " (" attr(href) ")";
  }

...but it will not be clickable.

Anyone get around this without changing underlying HTML?

Edit: I am using chrome 13.0.782.107. It turns out it's a bug. (Thanks Sean)

Answer

Sean Vieira picture Sean Vieira · Aug 15, 2011

It looks like you have discovered a bug in the browser you are using.

Based on the spec, the generated content should be treated as a child of the element it is being generated for. I created a JSFiddle to test this out, and the generated text is linked for me in most browsers (Chrome 13 being the solitary exception.) My guess is that you are testing in Chrome. This is a reproducible bug.

The workaround is to simply specify a background color on your links ... if you want to be able to use this for all links, declaring a background image (but not specifying an image, or using a transparent .gif - or as just pointed out, setting opacity to anything other than 1) works.

Related questions

Hide scroll bar, but while still being able to scroll

I want to be able to scroll through the whole page, but without the scrollbar being shown. In Google Chrome it's: ::-webkit-scrollbar { display: none; } But Mozilla Firefox and Internet Explorer don't seem to work like that. I also tried this …

Read More
Resource interpreted as stylesheet but transferred with MIME type text/html (seems not related with web server)

I have this problem. Chrome continues to return this error Resource interpreted as stylesheet but transferred with MIME type text/html The files affected by this error are just the Style, chosen and jquery-gentleselect (other CSS files that are imported …

Read More
Firebug-like debugger for Google Chrome

Is there anything like Firebug that you can use within Google Chrome? Essential features I would like: Inspect HTML source (select elements, delete them, etc.) check CSS values (the built-in solution is weird, somehow)

Read More