CSS Custom Properties Variables have known issues on before after and other pseudo-elements

Fixed Issue #11495448


François R.
Apr 3, 2017
This issue is public.
Found in
  • Microsoft Edge
Found in build #
Reported by 17 people

Sign in to watch or report this issue.

Steps to reproduce

Edge 15 shipped with support of Custom Properties. There are, however, known issues related to their usage in pseudo-elements. These issues will hopefully be ironed out by next version. In the mean time, if you encounter issues with var() in pseudo-elements or animation of pseudo-elements, it is very likely the issue is already known.

Please add a comment here with your reduced repro instead of filing a new issue.


0 attachments

    Comments and activity

    • Microsoft Edge Team

      Changed Assigned To to “James M.”

      Changed Status

    • Hello,

      Thank you for providing this information about the issue. We are working on a solution for a future build of Edge, and we are presently tracking this issue as a duplicate of an existing internal bug report. We look forward to additional feedback you may have on how we can improve Microsoft Edge.

      Best Wishes,
      The MS Edge Team

    • Hey Edge team, awesome work on the newest version of Edge! I’m so excited to see the addition of support for CSS Custom Properties and I’ve been putting them to use! That being said, I’ve run into an issue when applying them to pseudo elements :before and :after and just wanted to make sure you’re aware of it.

      When attempting to apply two different colors via two different custom properties as background colors for an element it’s :before or :after pseudo elements, the property set on the :before or :after will also get applied to the containing element.

      Here’s a live example: https://codepen.io/brianmtreese/pen/aWmROR

    • Here’s another issue where the cascade is not working properly for border color applied to a :before pseudo element: https://codepen.io/brianmtreese/pen/MmJeWB

    • https://jsfiddle.net/tnzbxpnw/4/

      The background color on the pseudo element should be semi-transparent.

    • Microsoft Edge Team

      Changed Assigned To to “James M.”

      Changed Status

      Changed Status to “Confirmed”

      Changed Assigned To from “James M.” to “Kevin B.”

      Changed Assigned To from “Kevin B.” to “Greg W.”

    • I do not have a reduced test case for this yet, since it’s been hard to track down what is causing this Single Div Accordion that heavily utilizes CSS Variables in pseudoelements to not render as expected. I used a workaround for a blocking issue that prevented it from even loading (https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/11975071/), but it still will not render as intended, with pseudoelements taking on (non-custom) property values of the main div. I will try to simplify this to narrow down what is really happening and where.

    • Microsoft Edge Team

      Changed Status from “Confirmed”

    • Resolving dupe to the other bug that is known, feel free to continue to leave comments with issues. We’ll verify them once the other issue that this is duped to has been fixed.

    • The next update it scheduled for September, right?
      Pretty long time to wait for a couple of bug fixes.

    • Having an issue with :before and :after elements.

      See the issue on codepen

    • And another issue with the behavior of inherit on a pseudo element.

      See the issue on codepen

    • Microsoft Edge Team

      Changed Assigned To to “Greg W.”

      Changed Status to “Confirmed”

    • Removing duplicate status as there are several issues tracked here and I wouldn’t want this issue to be autoclosed while there are still remaining known issues.

    • This bug was driving me mad… The problem seems to be that pseudo-element properties set via a variable inherited from their owner elements are “up-inherited” to their owner element. Here’s a simple test case:

      p {
      This paragraph’s text should be green. It should not
       be bold.

      For some (non-inherited?) properties such as left, it’s possible to override this “up-inheritance” using an !important declaration:

      p {
      left:0 !important;
      This paragraph should be near the left edge of the window.

      Otherwise, you have to provide code without variables to Edge or, in some cases, you can use custom, Edge-only CSS on the parent element to undo the "up-inheritance".

    • Note: My style and p tags as well as (less important) em and meta charset tags were stripped from the preceding code, So was the document type declaration. It’s easy enough for anyone familiar with HTML to infer where they should go though.

    • Will this be fixed until this years Fall Update?

    • Microsoft Edge Team

      Changed Status from “Confirmed” to “Fixed”

    • All of the issues stated below have been fixed by their respective own bugs on the issue to be release in the October 17 update to Windows 10. Thanks for all the feedback.

    • Glad to hear it’s fixed. :)

      I just noticed that much of the CSS was also stripped from the testcase code I posted previously, making the testcase code worthless. Seems that this issue tracker’s implementation of Markdown needs a fix.

      For the record for anyone wishing to reproduce this bug, the first bit of CSS should have been (sans Markdown):

      p { --color: red; --font-weight: bold; color: green; }
      p::after { color: var(–color); content: ""; font-weight: var(–font-weight); }

      The second bit should have been:

      p { --left: 15rem; left: 0 !important /* remove to trigger the bug */; position: relative; }
      p::after { content: ""; left: var(–left); }

    • And double hyphens are converted to em dashes. -_-

    • Bug with ::selection is still not fixed. Screenshot, demo.

      Edge 40.15063.0.0
      Windows 10 15063.632

    • fixed by their respective own bugs on the issue to be release in the October 17 update to Windows 10

    • I can confirm the issue on ::selection is fixed in the current Insiders Builds shipping as a release in two-three weeks.

    • The issue is still there.

      Windows 10 pro
      Microsoft Edge 40.15063.674.0
      Microsoft EdgeHTML 15.15063

      See codepen:

      The first box is how we wanted to implement it with CSS variables.
      With the second box we removed the CSS variables, and it works as inteded. But we need the CSS variables to control it with JS.
      The third box is our current solution so we can use a border, but we can’t change the color with JS because Edge uses the fallback color.

    • From our point of view, the issue is fixed. You seem to be using EdgeHTML 15. The current version is EdgeHTML 16. We will be release a Windows build with Edge 17 in the coming month. My advice to you is to upgrade your Windows version.

    • Still have this issue on 16.16299 and have just tried an insiders 17.(smth. from slow updates) with the same result. Appears when passing variables to an input[range] track and thumb like that:

      input[type=range]::-ms-track {
      width: 100%;
      height: 2px;
      cursor: pointer;
      background-color: var(–slider-line-color);
      border-radius: 1.5px;
      input[type=range]::-ms-thumb {
      height: 12px;
      width: 12px;
      border-radius: 6px;
      background-color: var(–slider-thumb-color);
      background-image: var(–slider-thumb-point-icon);
      border: 1px solid white;
      cursor: pointer;
      margin-top: -5px;

    • Hi all, I think I’ve got a unique (at least not described in this ticket so far) issue.


      If an element has a parent element with a pseudo element that uses a CSS Custom Property, any pseudo element on the element in question inherits the parent’s definition of that custom property, ignoring where that custom property may have been redefined.

      Windows 10 Pro
      Microsoft Edge 41.16299.15.0
      Microsoft EdgeHTML 16.16299

    • Hi Laurent, and thanks for the report! Yes, this indeed looks like a different issue which we haven’t fixed yet; could you please open a new issue for that, and link to it from here? That would be totally awesome!

    • Francois,

      Sure thing, here’s the link to the new issue: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/17410857/

    • Hi,

      we seem to be having an issue with this still, specifically related to the ::selection element.

      In our case, it is styled like this:

      :selection { color:#fff; background: var(--p4b-blue); }

      The background property gets ignored somehow (probably due to the variable) and thus text selection creates nothing but white text without any background - not cool, as most of our site’s background is white.

      Just select text anywhere on https://process4.biz using Edge to see it in action.

      Microsoft Edge 42.17134.1.0
      Microsoft EdgeHTML 17.17134

    • I think this issue is still a problem with pseudo elements on both input type=range & progress.
      Meaning: ::-ms-track, ::-ms-fill-lower and ::-ms-fill.

      Current Browserstack Edge versions:
      Microsoft Edge 42.17134.1.0
      Microsoft EdgeHTML 17.17134

    You need to sign in to your Microsoft account to add a comment.

    Sign in