Why Does Ie10 Require The Presence of a P:Hover {} Rule for Transitions to Work on a Pseudo Element

:before and :after not showing when site is pushed

Pseudo elements does not work well with @import, and can therefor cause problems in the browser.

If you move all your ::before and ::after to the main css wihtout using @import, it should work perfectly.

Correct Example Code

@import url("_styles/header.css");
@import url("_styles/body.css");
.products_design::before {
  content: " ";
  display: block;
  width: 70%;
  height: 5px;
  position: absolute;
  background: #FFF;
  top: -16.5em;
  margin-left: 15%;
  box-shadow: 0 0 20px #00000040;
}

.products_design::after {
  content: " ";
  display: block;
  width: 70%;
  height: 5px;
  position: absolute;
  background: #FFF;
  bottom: -10.5em;
  margin-left: 15%;
  box-shadow: 0 0 20px #00000040;
}

.about_images::before {
  content:" ";
  display: block;
  width: 50%;
  margin-left: 25%;
  height: 5px;
  background: #FFF;
  position: absolute;
  top: -13em;
  box-shadow: 0 0 20px #00000040
}

Wrong Example Code

@import url("_styles/media_query.css");
@import url("_styles/cookie.css");
@import url("_styles/pseudeo_elements.css");

Selecting and manipulating CSS pseudo-elements such as ::before and ::after using javascript (or jQuery)

You could also pass the content to the pseudo element with a data attribute and then use jQuery to manipulate that:

In HTML:

<span>foo</span>

In jQuery:

$('span').hover(function(){
    $(this).attr('data-content','bar');
});

In CSS:

span:after {
    content: attr(data-content) ' any other text you may want';
}

If you want to prevent the 'other text' from showing up, you could combine this with seucolega's solution like this:

In HTML:

<span>foo</span>

In jQuery:

$('span').hover(function(){
    $(this).addClass('change').attr('data-content','bar');
});

In CSS:

span.change:after {
    content: attr(data-content) ' any other text you may want';
}

Can I have an onclick effect in CSS?

The closest you'll get is :active:

#btnLeft:active {
    width: 70px;
    height: 74px;
}

However this will only apply the style when the mouse button is held down. The only way to apply a style and keep it applied onclick is to use a bit of JavaScript.

Browsers reformat my HTML which results in different look

When you get the innerHTML in some versions of IE, it will NOT give you back your original HTML. It will give you a generated version of the HTML that can be quite different from the original (though semantically identical to it).

I've seen some versions of IE:

• Remove quote marks around attributes
• Change the order of attributes
• Change the case of attribute names

So, in a nutshell, all you can count on when you get the innerHTML of something in IE is that it will give you semantically the same HTML, but it may not be the same HTML as what was in the page originally. It appears that it doesn't save the original HTML, but instead generates it from the object attributes. Since there are many legal ways to express a given set of attributes, IE will not necessarily generate it the same way you originally specified it.

I don't believe there is anything you can do about this unless you want to reformat the generated HTML that IE gives you according to your own style rules (add quotes where you want them, put attributes in a specific order, change to a specific case, etc...).

If you run this jsFiddle in IE7, you will see it change all three items above from what was originally specified.

I specify this HTML in IE7:

<div id="test" data-item="test" style="background-color: red; height: 40px; width: 100px;">

When I request innerHTML, I get this back (different order, caps and quoting):

<DIV style="BACKGROUND-COLOR: red; WIDTH: 100px; HEIGHT: 40px" id=test data-item="test"></DIV>

I'd actually be surprised if the vertical gap you notice is because of the changed HTML. IE is notorious for putting extra space around images. For one, they are an inline item by default so it treats them as being part of a line and gives the line they are on the prevailing line height. This can add extra space around images in various ways. The work-arounds I've used in IE are to make the image display: block (if that's appropriate) or to set font-size: 0 on the container that the image is in so IE doesn't give the line any additional height. You should also make sure that you've specified a border for the image because older versions of IE like to give images a default border too.

This extra spacing around an image can be triggered by the existence of a space in a line that didn't previously exist. Other browsers consider that space only as a separator, but in older versions of IE, it triggers some extra line spacing.

---

Related Topics