Pseudo-Elements Over DOM Nodes

Use pseudo-elements for decorative content instead of extra DOM nodes.

Incorrect (extra DOM node):

<button className={styles.button}>
  <span className={styles.background} />
  Click me
</button>

Correct (pseudo-element):

<button className={styles.button}>
  Click me
</button>

.button::before {
  content: "";
  /* decorative background */
}