IE crossing out pseudo element CSS?

Question

I've been trying to get a few pseudo elements to work on IE, but it just doesn't let me.

It crosses out the CSS and acts like it's not there, which kinda aggrevates me.

Would anyone know what I'm doing wrong?

.newbutton {
  border-radius: 50%;
  width: 74px;
  height: 74px;
  position: relative;
  background-color: black;
  margin: 60px 0px 25px 17px;
  overflow: visible;
}

.newbutton:before {
  content: "f";
  width: 80px;
  height: 80px;
  position: absolute;
  border-radius: 50%;
  z-index: -1;
  top: 37px;
  left: 37px;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-animation-name: fadecolor;
  -webkit-animation-duration: 5s;
  -webkit-animation-iteration-count: infinite;
  animation-name: fadecolor;
  animation-duration: 5s;
  animation-iteration-count: infinite;
}

.newbutton:after {
  content: "";
  width: 80px;
  height: 80px;
  position: absolute;
  border-radius: 50%;
  z-index: -2;
  top: -3px;
  left: -3px;
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#01BAE8), to(#0183D5));
}

<div class="starttour">
  <div class="newbutton headerbutton">
    <span class="iconhead icon-02-arrow-icon"></span>
  </div>
  <p>START TOUR</p>
</div>

Screenshot of what happens:

Pfff, tell me about it. It's trolling me on purpose, I bet. Stupid IE. — Kairowa, Jan 10 '15 at 10:40
Anyway, what version of IE are you testing in, and what does it tell you about the document mode/browser mode? I've never really understood why IE chooses to act this way but hopefully those things will provide some clues. — BoltClock, Jan 10 '15 at 10:42
IE11. I tried IE9, IE10 and Edge in the document mode, to no avail, unfortunately. — Kairowa, Jan 10 '15 at 10:46

score 61 · Accepted Answer · answered Jan 10 '15 at 18:46

61

This is a known issue, but the styles are in fact being applied. The developer tools thinks the pseudo-element styles are being overridden by the parent-elements corresponding styles. This is easily demonstrated by inspecting the Computed style of the parent-element and looking at (what the F12 tools believe to be) competing styles:

enter image description here

Again, however, these styles are in fact being applied to the correct elements - regardless what the developer tools believe or suggest. You can confirm this by running over the parent-element and the two pseudo-elements and logging their computed height:

(function () {

    var el = document.querySelector( ".newbutton" );

    [ "", "::before", "::after" ].forEach(function ( e ) {
        // Output: 74px, 80px, 80px
        console.log( window.getComputedStyle( el, e ).height );
    });

}());

I'll check to see if we already have an internal issue tracking this bug, and add this question to it. Generally speaking, we try to give issues like this the amount of attention proportional to the amount of grief the issue is causing in the real world. So having your question as a new addition on the ticket may help us move a fix forward :)

answered Jan 10 '15 at 18:46

Sampson

265,109
74
539
565

15

I am seeing the same issue in IE11 but pseudo element styles are not being applied. Even when turning off the assumed parental overrides in the Computed panel, pseudo element styles are not applied. The only portion of the whole block being rendered is the content rule, everything else is ignored. – gps03 Sep 21 '15 at 13:58
Going into the Computed I was able to click on a property and find that it was being overridden. I overrode the background for a th and the caret icons weren't showing for sorting (Datatables). Thanks! – Exzile Mar 15 '16 at 15:28
All `::after` pseudo styles in my code crossed out in IE11 and Edge. All rules indeed being applied :-) All but one: `cursor: pointer`. It's for a mobile hamburger menu, so I can let the pointer go (as I'm not expecting much hovering at that screen size). – Michael Benjamin Jul 17 '16 at 02:18
@Michael_B That's a known bug; I believe the pseudo element styles *think they conflict* with the parent element styles. So anything set on the pseudo element, that is also set on the parent, will be crossed out. – Sampson Jul 17 '16 at 17:54
Hi,so which is the solution? I'm using IE11 11.321.14393.0 and IE override my pseudo class... – Nammen8 Oct 18 '16 at 15:00
@Alex The reporting in the developer tools is _mistaken_, as my answer above states. – Sampson Oct 19 '16 at 18:39
Hi, I have the same issues IE 11.356 CSS are all stike out – Jomal Johny Sep 25 '19 at 09:37
Similar issue the CSS rule stikes out AND the rules are NOT applying for the icon font. – Vincent Sep 23 '20 at 22:24

Freddie · Answer 2 · 2017-09-12T16:16:32.677

43

I had this exact same issue! You must give your :before and :after pseudo elements a display property.

Add the following to the :before and :after.

display: block;

This should fix your issue. :)

edited Sep 12 '17 at 16:16

answered Jun 22 '16 at 09:37

Freddie

736
5
16

1

share what properties you currently have set. I'm going to guess you either dont have the content property set or you are trying to set a pseudo element on elements that dont allow for pseudos – Freddie Dec 29 '16 at 12:27
1

This fixed the thing for me! The properties are still crossed out in Dev Tools, but the element appears properly now. – Nikki Erwin Ramirez Mar 02 '17 at 10:18
Great thanks! Firstly i did this, it didn't help, but then I noticed that I didn't set left property. So, display: block; and left: 0; healed IE up! – Max Kurtz Jun 15 '19 at 09:49
1

Another day, another IE11 trick! Wait... it's 2020 already... – Neurotransmitter Dec 12 '19 at 13:11
1

I tryed add `display: block;` to pseudo-element :after , but it turned out no help! – tenado Feb 26 '21 at 10:18

score 2 · Answer 3 · answered Sep 21 '18 at 17:38

2

To add onto the answer above. I tried display: block but my issue was that the background image was coming out warped. Instead I used below:

display: inline-block;

This fixed my issue with warped images within my :before :after

answered Sep 21 '18 at 17:38

Edmund Park

21
1

score 2 · Answer 4 · answered Jan 07 '19 at 20:45

As I had the same problem with Material Font and IE11 and could not solve it with the above solutions, I looked further:

The documentation of the material design icons mentions to use

<i class="material-icons">&#xE87C;</i>

for browsers not supporting ligatures. The codepoints for each item are listed here: https://github.com/google/material-design-icons/blob/master/iconfont/codepoints

The problem with :after elements is that HTML in the content-Tag is rendered as plain text showing the &#x.. so you have to use the \ escape as following:

content:  "\e5c5";

Using the unicode character fixed my problem. But it's definitely worth noting that the pseudo element styles are actually applied in IE11 even if it looks like they are crossed out. The accepted answer along with this answer helped me see that. — samnau, Sep 30 '19 at 17:46

score 0 · Answer 5 · answered Sep 15 '20 at 09:51

0

I had this exact same issue! You must give your pseudo element's parent a overflow : visible property.

answered Sep 15 '20 at 09:51

Jabicks Ajith

11
1

score -1 · Answer 6 · answered May 28 '19 at 13:20

Check out this link "http://stackoverflow.com/questions/2587669/can-i-use-the-after-pseudo-element-on-an-input-field", as quoted from this link

:after and :before are not supported in Internet Explorer 7 and under, on any elements.

It's also not meant to be used on replaced elements such as form elements (inputs) and image elements.

In other words it's impossible with pure CSS.

/* * The trick is here: * this selector says "take the first dom element after * the input text (+) and set its before content to the * value (:before). */

input#myTextField + *:before {
       content: "";
    }

Work around with jQuery is available. – pjain May 28 '19 at 13:21 — pjain, May 28 '19 at 13:21

IE crossing out pseudo element CSS?

6 Answers6

Linked