{"id":9889,"date":"2026-06-03T10:34:51","date_gmt":"2026-06-03T15:34:51","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=9889"},"modified":"2026-06-03T10:34:52","modified_gmt":"2026-06-03T15:34:52","slug":"obscuring-text-with-counter-style","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/obscuring-text-with-counter-style\/","title":{"rendered":"Obscuring Text with @counter-style"},"content":{"rendered":"\n

The @counter-style<\/code>\u00a0at-property in CSS helps us shift from browser defaults to user-defined web styling for list markers. Like instead of the bullet-points of unordered lists and numbers of ordered lists, you can define any marker glyphs you want. But it’s uses extend beyond that, and we’re going to use it for some trickery in this article.<\/p>\n\n\n\n

List markers<\/strong> are the characters that precede each new entry in a list. They can be numbers, bullet symbols, or letters, typically denoting the position of each item in an ordered list.<\/p>\n\n\n\n

However,\u00a0@counter-style<\/code>\u00a0allows us to use characters that aren\u2019t part of the usual styles as markers. Since these markers represent a count<\/strong>, they can produce a string defined by the marker style using\u00a0CSS counter<\/a>.<\/p>\n\n\n\n

While typically used for bulleting lists, this spawning of text can come handy in various ways, like generating a sequence of characters to hide data or to create a word rotator. We won\u2019t have to manually put together the sequence: @counter-style<\/code> does it for us.<\/p>\n\n\n\n