Menu
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)
378
The input element has no content in the CSS view, and so has no :before or :after pseudo content. This is true of many other void or replaced elements. There is no pseudo element referring to outside the element.
In CSS2. 1, an element can only have at most one of any kind of pseudo-element at any time. (This means an element can have both a :before and an :after pseudo-element — it just cannot have more than one of each kind.)
CSS ::before and ::after pseudo-elements allow you to insert “content” before and after any non-replaced element (e.g. they work on a <div> but not an <input> ). This effectively allows you to show something on a web page that might not be present in the HTML content.
::after (:after) In CSS, ::after creates a pseudo-element that is the last child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default.
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.
116
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.
43
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;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With