CSS variables: a style using a CSS variable (custom property) on a :before rule is applied to the parent

Duplicate Issue #12252319 • See Issue #12414257


Jerome L.
Jun 6, 2017
This issue is public.
Found in
  • Microsoft Edge
See progress on Bug #12414257
Reported by 3 people

Sign in to watch or report this issue.

Steps to reproduce

Microsoft Edge 40.15063.0.0
Microsoft EdgeHTML 15.15063

When using a CSS variable in a :before (or :after) rule, the style is applied to the parent.

:root {
  --my-color: blue;

div {
  width: 200px;
  height: 200px;

div:before {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
    this background color should be applied on the :before element,
    but is instead applied to the parent div element
  background-color: var(--my-color);

See codepen for demo


0 attachments

    Comments and activity

    • I just found https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/11495448/, therefore this issue can be ignored.

    • Microsoft Edge Team

      Changed Assigned To to “James M.”

      Changed Status to “Duplicate”

    • Hello,

      Thank you for providing this information about the issue. We have confirmed the problem, and we are working on a solution for a future build of Edge. 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

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

    Sign in