Blog

Pseudo-elements and Generated Content: ::before/::after, content, Counters, @counter-style, ::marker and list-style

::before and ::after exist only when the content property has a value other than none; generated content reaches screen readers but is not copied or searched, so it is for decoration and numbers while information stays in the HTML. The post measures alternative text (content: "★" / ""), nested numbering with counters(), a @counter-style for the Turkish alphabet, string markers and the Safari limit of ::marker, and Bookstore's checkout steps.