Remove List Markers Without Affecting Semantics

Avatar of Geoff Graham
Geoff Graham on (Updated on )
:where(ul, li, menu) {
  list-style: "";
}

The more “correct” approach is to set list-style to none but that has a latent consequence of Safari no longer recognizing the element as a proper list, semantically speaking. We could fix this in HTML:

<ol style="list-style: none;" role="list">
  <li role="listItem">...</li>
  <li role="listItem">...</li>
  <li role="listItem">...</li>
</ol>

<ul style="list-style: none;" role="list">
  <li role="listItem">...</li>
  <li role="listItem">...</li>
  <li role="listItem">...</li>
</ul>

…but the CSS snippet prevents us from having to maintain things in two places. The snippet works because an empty string evaluates to exactly that: an empty string.

DevTools showing the computed value for the an unordered list with a style type set to empty quotes.

As with anything like this, it’s worth thoroughly testing with screen readers and real users to ensure that the semantics and accessibility of your work are not negatively impacted.