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

html css google-chrome pseudo-element

61,227

Solution 1

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.

Solution 2

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.

Solution 3

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;
  }

Solution 4

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.

Solution 5

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;
}

View more solutions

61,227

Author by

Catskul

Updated on August 19, 2020

Comments

Catskul almost 4 years
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)
Sean Vieira almost 13 years

Not entirely true ... see w3.org/TR/CSS2/generate.html#propdef-content for the specs on how CSS should be able to interact with the attributes of HTML tags defined as the subject of the selector in question.
paulmelnikow almost 13 years

Using <a class="plain" in the generated content, and adding A.plain:before { content: "" } would avoid infinite recursion.
duri almost 13 years

Are you sure? Could you please post a working example? I don't think there is a way how to attach event listener to a pseudoelement.
Sikshya Maharjan almost 13 years

Generated content isn't inserted into the DOM, so JavaScript has no access to its properties/events/methods...
Catskul almost 13 years

I was just typing up a similar answer when you submitted this. Will this work though? padding will push the after element out as well no?
Sean Vieira almost 13 years

@noa -- :after ... but good idea :-) Unfortunately, HTML isn't supported in the generated content (tests here: jsfiddle.net/zx6Wv)
Knu almost 13 years

"jQuery or javascript" this is a new trend jQuery ≠ javascript?
Knu almost 13 years

@cat no because generated content does not alter the document tree.
Catskul almost 13 years

Very nice. Good catch! I suppose this means I should file a bug against chrome 13 (unless you'd like to).
Sean Vieira almost 13 years

@Catskul - just filed one :-) Thanks though! (Link is code.google.com/p/chromium/issues/detail?id=92917 if you want to add to it).
Dan Dascalescu almost 12 years

This bug hasn't been fixed yet, as of August 2012.
Sean Vieira almost 12 years

@DanDascalescu - this may be a regression - I'd star the bug report, add a comment, and / or open another one against Chrome 21.
Martin Krung over 5 years

Its finaly fixed in Chrome 71, at this time beta!