<p>Notifications</p>
@import "https://unpkg.com/open-props" layer(design.system);
@import "https://unpkg.com/open-props/normalize.min.css" layer(demo.support);

@layer demo {
  p::before {
    background: var(--red-5);
    box-shadow: 0 0 var(--size-2) var(--red-5);
  }
}

@layer demo.support {
  body {
    display: grid;
    place-content: center;
    padding: var(--size-5);
    gap: var(--size-5);
  }
  
  p {
    position: relative;
  }
  
  p::before {
    content: "";
    position: absolute;
    inset-inline-start: calc(var(--size-2) * 3 * -1);
    inline-size: var(--size-2);
    aspect-ratio: 1;
    border-radius: var(--radius-round);
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.