Css :after property not working in IE - css

I am using css :target property but it is not working in IE8, is there any hack to make it work?

IE8 supports :before and :after - http://msdn.microsoft.com/en-us/library/cc304082(v=vs.85).aspx
Perhaps it is being overridden by something else?

According to http://www.w3schools.com/cssref/sel_after.asp a Doctype has to be declared on the page for the :after property to work. Does this help? Would also help if you posted code.

try using this at the start of HTML file. Then it supports :before, :after property.
<!DOCTYPE HTML>
:target property is CSS3 property. IE8 doesn't support most of CSS3 styles.

you can use .next() or .closet() method in jquery
for example
$(function() {
$('span').next().css('color','red');
})
<span>hiiii</span>
<p>byeee</p>
the red color apply on p tag

Related

IE and Psuedo Elements not working

I am using :before and :after but they are not showing in IE10 and below.
Here is the link to the site: wrdtempsite.com.au/da
When viewing dev tools (F12) all of the css is struck through... ?
Any help would be appreciated.
Thanks.
You may need to add empty CSS rule for :hover before adding rules for :before and :after
Check the below link, it deals with the same issue. hope it helps
::after on :hover does not work in IE
Why does IE10 require the presence of a p:hover {} rule for transitions to work on a pseudo element?
The issue was I had declared 0 0 no-repeat at the end; when I removed these it worked fine.
Thanks

CSS :after doesn't work with images?

I think I tried everything and :after simply doesn't want to work with images. Is there any CSS limitation that I'm not aware of? Or did I do something wrong?
Here's the example:
http://jsfiddle.net/vHMRk/
Most browsers don't support :after and :before for img tags: http://lildude.co.uk/after-css-property-for-img-tag
The effect of :after on img is vaguely defined. The spec puts it this way: “Note: Note. This specification does not fully define the interaction of :before and :after with replaced elements (such as IMG in HTML). This will be defined in more detail in a future specification.” In practice, it’s unspecified, and there does not seem to be any progress in this are in CSS3 drafts.

Handling pseudo-elements ::before and ::after when targeting IE6 IE7

Can any CSS3 experts tell me the best strategy for handling the before and after pseudo elements with IE6 and IE7?
If you use jQuery it is a simple one-liner. Just use prepend() and inject a span with a class .before (for the simplicity of changing the CSS). I've made a fiddle for you.
I write a small script for old IE to add special elements in DOM. (Via IE conditional comments.) The rest of common browsers get this by pure CSS. The downside is I have to write the code twice. The upside, I have IE only code in one place.

How can I solve this :before or :after issue in IE7?

I tried to add an image using :before in css. It worked fine in firefox 4 but when I tested it in IE 7,it didn't display me anything..How can I solve this issue in IE7?
#vimal; :before is css2.1 property which is not supported by ie7.
Check these for more:
http://css-tricks.com/9189-browser-support-pseudo-elements/
http://www.quirksmode.org/css/contents.html
IE7 doesn't support the :before pseudo class.
There is nothing you can do with CSS alone to make it work. You could possibly use a background-image on the li element itself.
You could mimic it with JavaScript.

CSS selector only works if <tag>has contents</tag>

I'd like to assign a style to a HTML element - but only in the event that the tag has some contents set.
Is this possible using pure CSS? Ideally I would like to avoid JS or server-side changes to the structure of the HTML itself.
CSS3 has an :empty pseudo -class.
I can't see any way of doing this in pure CSS2.1.
You can do this with CSS3 by combining the :not and :empty pseudo-classes. For browsers that don't support both you'll need to use JS or a server-side solution.
div:not(:empty) { background-color:blue; }

Resources