CSS content accepts alternative text

Also on X

The CSS content property accepts alternative text after a slash, so generated content in ::before and ::after no longer has to hurt screen reader users.

.new-item::before {
  /* "black star" and element content is read out */
  content: "★";

  /* "Highlighted item" and element content is read out */
  content: "★" / "Highlighted item";

  /* Generated content is ignored and only element content is read out */
  content: "★" / "";
}

Supported in every major engine since Firefox 128. Via Stefan Judis.

← All TILs