Issue with ::before and ::after pseudo elements #24

qqilihq · 2019-12-19T17:59:37Z

First: Many thanks for making this -- looks like this will save us quite some time!

I'm encountering a problem with CSS ::before and ::after elements. Minimal example follows using the latest version from the master branch:

index.html:

<html>
<head>
  <script src="https://rawcdn.githack.com/nuxodin/ie11CustomProperties/40dddac11e14fda350d0f918f6039f80cde090e3/ie11CustomProperties.js"></script>
  <link href="./styles.css" rel="stylesheet"></head>
</head>
<body>
  <div></div>
</body>
</html>

styles.css:

:root {
  --red: red;
  --green: green;
  --blue: blue;
}

div {
  position: relative;
  width: 600px;
  height: 200px;
  background-color: var(--red);
}

div::before,
div::after {
  content: "";
  position: absolute;
  width: 33.4%;
  height: 100%;
}

div::before {
  left: 33.4%;
  background-color: var(--green);
}

div::after {
  left: 66.6%;
  background-color: var(--blue);
}

This is supposed to create three squares in red, green, and blue. Screenshot from Chrome, Edge, etc. looks as follows:

When rendering in IE with the polyfill, I see the following:

The generated CSS code looks as follows:

Any ideas what's wrong here?

The text was updated successfully, but these errors were encountered:

nuxodin · 2019-12-19T19:30:16Z

Thank you for your feedback!

Yes, IE has a bug, where unknown properties at pseudo-selectors are computed at the element and not at the pseudoelement.
This meens, you can set propertys for pseudo-elements, but the property is used by ::before, ::after and the Element itself.

Its complicated to fix this issue, at the moment I do not have enough time and nerves to fix it.

qqilihq · 2019-12-20T11:47:38Z

I understand -- thank you for the clarification!

In the end I went for a different polyfill which worked for my use case. Anyways, I’d suggest to keep this ticket open as it might be helpful for others and contains the test case?

karungn1 · 2020-01-21T17:34:04Z

@qqilihq I have similar problem and problem with SVG path's fill and stroke (sample attached below). Please suggest the polyfill you have used.

```

path {
&.stroke {
stroke: var(--agentMsgDisabledBorder);
}
&:not(.stroke) {
fill: var(--agentMsgBg);
}
}
}

nuxodin · 2020-01-23T13:39:55Z

@karungn1
Maybe your issue is this one fixed resently?
#15
Do you have the latest version?

3SCadmin · 2020-03-13T11:23:45Z

This issue had me guessing for a whole afternoon.

You can create pseudo elements with JS,
but you can't manipulate them afterwards (not part of DOM)

One way around this is:

declare CSS variables on elements you can manipulate (body)
in the pseudo element styling reference these variables
use document.querySelector("body").style.setProperty() to change the CSS variables

That's where I was at when I tested this polyfill. I could see that .setProperty() was supported and working in your example. I just couldn't replicate the functionality in my test scenario... because my scenario had psuedo elements in it :)

Please please add this piece of the puzzle to ie11CustomProperties.js

nuxodin · 2020-03-31T21:02:18Z

Sorry, at the moment, its a too big puzzle for my spare time....

happy2deepak · 2020-09-18T16:15:57Z

In the end I went for a different polyfill that worked for my use case

@qqilihq - can you please help me with the Polyfill you used? Even I'm facing the exact same issue.

qqilihq · 2020-09-19T07:28:10Z

@happy2deepak We used https://github.com/jhildenbiddle/css-vars-ponyfill

happy2deepak · 2020-09-21T05:25:14Z

Thanks a lot @qqilihq . But yes 11000 websites are using this current polyfill and there's a no fix on this since last year. It is strange.
cc: @nuxodin - can you help us out buddy ?

Update:
Just found out that if you use an !important on the parent of psuedo-element (::after, &::before), it doesn't cause this issue on IE. But it is not a good practice for bigger projects. Though won't harm a small website.

benm-eras · 2020-12-03T17:16:35Z

@happy2deepak could you provide a little example of what you meant in your update there? I am not sure what you mean.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Issue with ::before and ::after pseudo elements #24

Issue with ::before and ::after pseudo elements #24

qqilihq commented Dec 19, 2019 •

edited

Loading

nuxodin commented Dec 19, 2019

qqilihq commented Dec 20, 2019

karungn1 commented Jan 21, 2020 •

edited

Loading

nuxodin commented Jan 23, 2020 •

edited

Loading

3SCadmin commented Mar 13, 2020 •

edited

Loading

nuxodin commented Mar 31, 2020

happy2deepak commented Sep 18, 2020 •

edited

Loading

qqilihq commented Sep 19, 2020

happy2deepak commented Sep 21, 2020 •

edited

Loading

benm-eras commented Dec 3, 2020

Issue with ::before and ::after pseudo elements #24

Issue with ::before and ::after pseudo elements #24

Comments

qqilihq commented Dec 19, 2019 • edited Loading

nuxodin commented Dec 19, 2019

qqilihq commented Dec 20, 2019

karungn1 commented Jan 21, 2020 • edited Loading

nuxodin commented Jan 23, 2020 • edited Loading

3SCadmin commented Mar 13, 2020 • edited Loading

nuxodin commented Mar 31, 2020

happy2deepak commented Sep 18, 2020 • edited Loading

qqilihq commented Sep 19, 2020

happy2deepak commented Sep 21, 2020 • edited Loading

benm-eras commented Dec 3, 2020

qqilihq commented Dec 19, 2019 •

edited

Loading

karungn1 commented Jan 21, 2020 •

edited

Loading

nuxodin commented Jan 23, 2020 •

edited

Loading

3SCadmin commented Mar 13, 2020 •

edited

Loading

happy2deepak commented Sep 18, 2020 •

edited

Loading

happy2deepak commented Sep 21, 2020 •

edited

Loading