pseudo-element

I have found some strange behaviour in Internet Explorer (IE10 and also when emulating all versions that support ::after ). When applying the pseudo-element to a hover state of an element ( .element:hover::after ) it does not work in IE, but it does in all other major browsers. http://jsfiddle.net/BramVanroy/9jpeZ/1/ #d1::after { /* Works in IE */ content: "no hover needed"; border: 1px solid blue; display: block; } #d2:hover::after { /* Does not work in IE */ content: "Y U NO WORK IN IE"; border: 1px solid blue; display: block; } Is there a CSS fix available for this? (No JS/jQuery.) This

I have this simple CSS... div:before { content: "G'day"; filter: alpha(opacity=40); -moz-opacity: .4; opacity: .4; } jsFiddle . The :before pseudo element has the correct opacity in Firefox 6. In IE8, the opacity is not applied. Typically , setting the opacity on the div works, but that isn't what I want. I tried adding display: block but it didn't help. Whilst I could workaround this, is there any trick to get IE8 to honour the opacity property on a :before (and :after for that matter) pseudo element? thirtydot I don't think it's possible. I had the same problem a while back, and I ended up

Can't seem to animate pseudo elements with -webkit-transition. The fiddle below shows what I mean when run in Chrome/Safari, I guess this isn't supported right now? http://jsfiddle.net/4rnsx/130/ Fixed in Google Chrome on January 3rd, 2013. By now (I do update this list) it's supported in: FireFox 4.0 and above Chrome 26 and above IE 10 and above Waiting for Safari and Chrome for Android to pull these updates. You can test it yourself in your browser , or See the browser support table . Well, actually, you can. You just need to leverage the often forgotten inherit value. Unfortunately we can't

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) 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

So I've searched high and low and have been unable to find an answer for a seemingly simple problem. I have an ordered list like this: <ol> <li>Some text here</li> <li>Some more text here..</li> <li>Oh yeah, here's some pretty text</li> </ol> Which displays: Some text here Some more text here.. Oh yeah, here's some pretty text What I'd like to really display: Step 1. Some text here Step 2. Some more text here.. Step 3. Oh yeah, here's some pretty text Question: Is this possible, and if so, how would I go about doing it without using questionable solutions? You can use ::before ( :before for

I would like to customize input type range like this . I tried to use the following code to change the thumb and as below but selected range color is not changed. HTML : <input type="range" /> CSS : input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; height: 20px; width: 20px; border-radius: 10px; background: red; cursor: pointer; border: none; margin-top: -8px; } input[type=range] { -webkit-appearance: none; outline: 0; margin: 0; padding: 0; height: 30px; width: 100%; } Could anybody please suggest me to change the selected runnable track background color? Interesting

I have the following CSS code .editable:before { content: url(../images/icons/icon1.png); padding-right:5px; } this is used in conjunction with the following markup: <span class="editable"></span> In every other blessed browser in the world my icon is appearing, but IE8 seems to have a problem with this. Isn't the :before pseudo-element CSS2? isn't content: also a CSS2 command? what gives? Update: I misread the page! IE 8 does support :before with images, it just doesn't when it is in IE7 compatibility mode. IE8 supports :before , but not and also images as content when not in compatibility

As title, I'm adding icons using .icon-* . When adding an icon to an hyperlink: <a href="#" class="icon-email icon-large">Email me!</a> The content inserted by content property shows the underline text-decoration on hover. I'd like to disable the text-decoration only for the content before: [class^="icon-"]:before, [class*=" icon-"]:before { font-family: 'IcoMoon'; font-style: normal; speak: none; } .icon-mail:before { content: "\37"; } [class^="icon-large-"]:before, [class*=" icon-large"]:before { font-size: 48px; line-height: 48px; } a[class^="icon-"]:before, a[class*=" icon-"]:before {

I am using the following CSS, which seems to be working: a.up:after{content: " ↓";} a.down:after{content: " ↑";} The characters however cannot seem to be encoded like this, as the output is literal and shows the actual string: a.up:after{content: " ↓";} a.down:after{content: " ↑";} If I can't encode it, it feels like I should use something such as .append() in jQuery, as that supports the encoding. Any ideas? To use encoded Unicode characters in content you need to provide either the characters themselves (as you do), or their UTF-8 escape sequences instead of HTML entities: a.up:after {