::before is suitable for decoration, but not for the main text

Useful to know

::before creates a pseudo-element before the selected element’s content. It is commonly combined with content to provide an icon, symbol or decorative shape. [1]

For example, .note::before { content: "• "; } adds a bullet. The main warning still needs to appear in the HTML because generated text is not handled identically by all assistive technologies. With content: "", the pseudo-element can be purely decorative. Order numbers, required instructions and labels should remain accessible independently of the stylesheet.