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

Confirmed Issue #11495448


François R.
Apr 3, 2017
This issue is public.
Found in
  • Microsoft Edge
Found in build #
Reported by 2 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 to “Confirmed”

    • 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

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

    Sign in