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

pseudo elements a:after a:before allow you to add t开发者_JS百科ext 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)

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.

I've had the same problem and apparently if I set

a { vertical-align: middle; }

(thus on the link itself, not the pseudo element), it works.

I'm hoping someone has a better solution than this, but just in case not, I did come up with this horrible/crappy/hacky solution:

  a {
     margin-right: 40px;
  }

  a:after {
     content: " (" attr(href) ")";
     margin-left: -40px;
  }

Just add this to your css:

a {padding-right:Ypx} /* Y = size of your url in pixels */

If the size of the URL varies you will have to use javascript to get it.

If you have a link on Wrapper then you can make pseudo-elements clickable by setting pointer-events to none.

a:after {
 pointer-events: none;
}

To avoid modifying the document tree, you could use a JavaScript click handler for a:after.

Edit: This doesn't work, because pseudo elements aren't added to the DOM.

The :before and :after add content before and after the selector. In CSS, there's no selector that let's you get and edit the content inside a tag. The only way to make that happen would be with jQuery or javascript to actually edit the HTML.

I wrapped the link and the text separately -- the :before goes on the container and the link goes inside. This way I can use the :before as a jQuery tigger and the text as a link. HTML:

<li class="before-here"><a href="#">My Link Text</a></li> 

CSS:

li.before-here:before{ //some css like an image }

Jquery:

$("li.before-here").click(function(){ //do something});

I'm using this to create a hide/show toggle in a tree -- this gives me the button I need on the left and allows me to link to the parent.