Bread<\/li>\n\n\n\n
Milk<\/li>\n\n\n\n
Butter<\/li>\n\n\n\n

Apples<\/li>\n<\/ol>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n

type<\/code><\/h3>\n\n\nWe can use the type<\/code> attribute to change the counter’s representation. It’s similar to CSS’s list-style-type<\/code>, but it has its own limited uses and shouldn’t be used interchangeably*. Its possible values are:<\/p>\n\n\n\n \n1<\/code> for decimal numbers (default)<\/li>\n\n\n\n a<\/code> for lowercase alphabetic<\/li>\n\n\n\n A<\/code> for uppercase alphabetic<\/li>\n\n\n\n i<\/code> for lowercase Roman numbers<\/li>\n\n\n\n I<\/code> for uppercase Roman numbers<\/li>\n<\/ul>\n\n\n\n<ol type=\"a\">\n <li>Bread<\/li>\n <li>Milk<\/li>\n <li>Butter<\/li>\n <li>Apples<\/li>\n<\/ol>\n\n<ol type=\"i\">\n <li>Bread<\/li>\n <li>Milk<\/li>\n <li>Butter<\/li>\n <li>Apples<\/li>\n<\/ol><\/code><\/pre>\n\n\n\n\n\n\nBread<\/li>\n\n\n\n Milk<\/li>\n\n\n\n Butter<\/li>\n\n\n\n Apples<\/li>\n<\/ol>\n<\/div>\n\n\n\n\n\nBread<\/li>\n\n\n\n Milk<\/li>\n\n\n\n Butter<\/li>\n\n\n\n Apples<\/li>\n<\/ol>\n<\/div>\n<\/div>\n\n\n\nIt’s weird enough to use type<\/code> on ol<\/code> elements, but it still has some use cases*. However, usage with the ul<\/code> element is downright deprecated.<\/p>\n<\/div>\n<\/div>\n\n\n\n \nvalue<\/code><\/h3>\n\n\nThe value<\/code> attribute sets the value for a specific li<\/code> element. This also affects the values of the li<\/code> elements after it.<\/p>\n\n\n\n <ol>\n <li>Bread<\/li>\n <li value=\"4\">Milk<\/li>\n <li>Butter<\/li>\n <li>Apples<\/li>\n<\/ol><\/code><\/pre>\n\n\n\n\n Bread<\/li>\n Milk<\/li>\n Butter<\/li>\n Apples<\/li>\n<\/ol>\n<\/div>\n\n\n\nreversed<\/code><\/h3>\n\n\nThe reversed<\/code> attribute will start counting elements in reverse order, so from highest to lowest.<\/p>\n\n\n\n <ol reversed>\n <li>Bread<\/li>\n <li>Milk<\/li>\n <li>Butter<\/li>\n <li>Apples<\/li>\n<\/ol><\/code><\/pre>\n\n\n\n\nBread<\/li>\n\n\n\n Milk<\/li>\n\n\n\n Butter<\/li>\n\n\n\n Apples<\/li>\n<\/ol>\n<\/div>\n<\/div>\n\n\n\n\nAll can be combined<\/h3>\n\n\nIf you ever feel the need, all list attributes can be combined in one (ordered) list.<\/p>\n\n\n\n <ol reversed start=\"2\" type=\"i\">\n <li>Bread<\/li>\n <li value=\"4\">Milk<\/li>\n <li>Butter<\/li>\n <li>Apples<\/li>\n<\/ol><\/code><\/pre>\n\n\n\n\nBread<\/li>\n\n\n\n Milk<\/li>\n\n\n\n Butter<\/li>\n\n\n\n Apples<\/li>\n<\/ol>\n<\/div>\n\n\n\n* Do we need them if we now have CSS?<\/h3>\n\n\nFunny enough, the first CSS specification<\/a> already included list-style-type<\/code> and other properties to style lists, and it was released before HTML 3.2<\/a> \u2014 the first HTML spec that included some of the previous list attributes. This means that at least on paper, we had CSS list styling before HTML list attributes, so the answer isn’t as simple as “they were there before CSS.”<\/p>\n\n\n\n Without CSS, a static page (such as this guide) won’t be pretty, but at the very least, it should be readable. For example, the type<\/code> attribute ensures that styled ordered lists won’t lose their meaning if CSS is missing, which is especially useful in legal or technical documents. Some attributes wouldn’t have a CSS equivalent until years later, including reversed<\/code>, start<\/code> and value<\/code>.<\/p>\n<\/div>\n<\/div>\n\n\n<\/details>\n\n\n \n \n Styling Simple Counters in CSS<\/h2>\n <\/summary>\n \n\nFor most use cases, styling lists in CSS doesn’t take more than a couple of rules, but even in that brevity, we can find different ways to style the same list.<\/p>\n\n\n\n\n::marker<\/code> or ::before<\/code>?<\/h3>\n\n\n\n<\/baseline-status>\n\n\n\nThe ::marker<\/code><\/a> pseudo-element represents the counter part of a list item. As a pseudo-element, we can set its content<\/code><\/a> property to any string to change its counter representation:<\/p>\n\n\n\n li::marker {\n content: \"💜 \";\n}<\/code><\/pre>\n\n\n\n\nBread<\/li>\n\n\n\n Milk<\/li>\n\n\n\n Butter<\/li>\n\n\n\nApples<\/li>\n<\/ul>\n\n\n\nThe content<\/code> in pseudo-elements also accepts images, which allows us to create custom markers:<\/p>\n\n\n\nli::marker {\n content: url(\".\/logo.svg\") \" \";\n}<\/code><\/pre>\n\n\n\n\nbread<\/li>\n\n\n\n milk<\/li>\n\n\n\n butter<\/li>\n\n\n\napples<\/li>\n<\/ul>\n\n\n\nBy default, only li<\/code> elements have a ::marker<\/code> but we can give it to any element by setting its display<\/code><\/a> property to list-item<\/code>:<\/p>\n\n\n\n h4 {\n display: list-item;\n}\n\nh4::marker {\n content: \"\u25e6 \";\n}<\/code><\/pre>\n\n\n\nThis will give each h<\/code>4 a ::marker<\/code> which we can change to any string:<\/p>\n\n\nList Title<\/h4>\n\n\nHowever, ::marker<\/code> is an odd case: it was described in the CSS spec more than 20 years ago, but only gained somewhat reliable support in 2020 and still isn’t fully supported in Safari. What’s worst, only font-related properties (such as font-size<\/code> or color<\/code>) are allowed, so we can’t change its margin<\/code> or background-color<\/code>.<\/p>\n\n\n\nThis has led many to use ::before<\/code><\/a> instead of ::marker<\/code>, so you’ll see a lot of CSS in which the author got rid of the ::marker<\/code> using list-style-type: none<\/code> and used ::before<\/code> instead:<\/p>\n\n\n\n li {\n \/* removes ::marker *\/\n list-style-type: none;\n}\n\nli::before {\n \/* mimics ::marker *\/\n content: \"\u25b8 \";\n}<\/code><\/pre>\n<\/div>\n\n\n\nlist-style-type<\/code><\/h3>\n\n\n\n<\/baseline-status>\n\n\n\nThe list-style-type<\/code><\/a> property can be used to replace the ::marker<\/code>‘s string. Unlike ::marker<\/code>, list-style-type<\/code> has been around forever and is most people’s go-to option for styling lists. It can take a lot<\/em> of different counter styles that are built-in in browsers, but you will probably use one of the following:<\/p>\n\n\n\n For unordered lists:<\/p>\n\n\n\n \ndisc<\/code><\/li>\n\n\n\n circle<\/code><\/li>\n\n\n\nsquare<\/code><\/li>\n<\/ul>\n\n\n\nul {\n list-style-type: square;\n}\n\nul {\n list-style-type: circle;\n}<\/code><\/pre>\n\n\n\n\n\n\nbread<\/li>\n\n\n\nmilk<\/li>\n<\/ul>\n<\/div>\n\n\n\n\n\nbutter<\/li>\n\n\n\n apples<\/li>\n<\/ul>\n<\/div>\n<\/div>\n\n\n\nFor ordered lists:<\/p>\n\n\n\n \ndecimal<\/code><\/li>\n\n\n\n decimal-leading-zero<\/code><\/li>\n\n\n\n lower-roman<\/code><\/li>\n\n\n\n upper-roman<\/code><\/li>\n\n\n\n lower-alpha<\/code><\/li>\n\n\n\n upper-alpha<\/code><\/li>\n<\/ul>\n\n\n\nol {\n list-style-type: upper-roman;\n}\n\nol {\n list-style-type: lower-alpha;\n}<\/code><\/pre>\n\n\n\n\n\n\nbread<\/li>\n\n\n\n milk<\/li>\n<\/ol>\n<\/div>\n\n\n\n\n\nbutter<\/li>\n\n\n\n apples<\/li>\n<\/ul>\n<\/div>\n<\/div>\n\n\n\nYou can find a full list of valid counter styles here<\/a>.<\/p>\n\n\n\n It can also take none<\/code> to remove the marker altogether, and since not long ago, it can also take a <string><\/code> for ul<\/code> elements.<\/p>\n\n\n\n ul {\n list-style-type: none;\n}\n\nul {\n list-style-type: \"➡️ \";\n}<\/code><\/pre>\n\n\n\n<\/figure>\n<\/div>\n<\/div>\n\n\n<\/details>\n\n\n\n \n Creating Custom Counters<\/h2>\n <\/summary>\n \n\n\n<\/baseline-status>\n\n\n\nFor a long time, there wasn’t a CSS-equivalent to the HTML reverse<\/code>, start<\/code> or value<\/code> attributes. So if we wanted to reverse or change the start of multiple lists, instead of a CSS class to rule them all, we had to change their HTML one by one. You can imagine how repetitive that would get.<\/p>\n\n\n\n Besides, list attributes simply had their limitations: we can’t change how they increment with each item and there isn’t an easy way to attach a prefix or suffix to the counter. And maybe the biggest reason of all is that there wasn’t a way to number things that weren’t lists!<\/p>\n\n\n\n Custom counters let us number any collection of elements with a whole new level of customization. The workflow is to:<\/p>\n\n\n\n\nInitiate the counter with the counter-reset<\/code><\/a> property.<\/li>\n\n\n\n Increment the counter with the counter-increment<\/code><\/a> property.<\/li>\n\n\n\n Individually set the counters with the counter-set<\/code><\/a> property.<\/li>\n\n\n\n Output the counters with either the counter()<\/code><\/a> and counters()<\/code><\/a> functions.<\/li>\n<\/ol>\n\n\n\nAs I mentioned, we can make a list out of any collection of elements, and while this has its accessibility concerns, just for demonstration’s sake, let’s try to turn a collection of headings like this…<\/p>\n\n\n\n<div class=\"index\">\n <h2>The Old Buccaneer<\/h2>\n <h2>The Sea Cook<\/h2>\n <h2>My Shore Adventure<\/h2>\n <h2>The Log Cabin<\/h2>\n <h2>My Sea Adventure<\/h2>\n <h2>Captain Silver<\/h2>\n<\/div><\/code><\/pre>\n\n\n\n…into something that looks list-like. But just because we can make an element look like a list doesn’t always mean we should do it. Be sure to consider how the list will be announced by assistive technologies, like screen readers, and see the Accessibility<\/a> section for more information.<\/p>\n\n\n\n \nInitiate counters: counter-reset<\/code><\/h3>\n\n\nThe counter-reset<\/code><\/a> property takes two things: the name of the counter as a custom ident and the initial count as an integer. If the initial count isn’t given, then it will start at 0<\/code> by default:<\/p>\n\n\n\n .index {\n counter-reset: index;\n \/* The same as *\/\n counter-reset: index 0;\n}<\/code><\/pre>\n\n\n\nYou can initiate several counters at once with a space-separated list and set a specific value for each one:<\/p>\n\n\n\n.index {\n counter-reset: index another-counter 2;\n}<\/code><\/pre>\n\n\n\nThis will start our index<\/code> counter at 0<\/code> (the default) and another-counter<\/code> at 2.<\/code><\/p>\n\n\nSet counters: counter-set<\/code><\/h3>\n\n\nThe counter-set<\/code><\/a> works similar to counter-reset<\/code>: it takes the counter’s name followed by an integer, but this time it will set the count for that element onwards. If the integer is omitted, it will set the counter to 0<\/code> by default.<\/p>\n\n\n\n h2:nth-child(2) {\n counter-set: index;\n \/* same as *\/\n counter-set: index 0;\n}<\/code><\/pre>\n\n\n\nAnd we can set several counters at once, as well:<\/p>\n\n\n\nh2:nth-child(3) {\n counter-set: index 5 another-counter 10;\n}<\/code><\/pre>\n\n\n\nThis will set the third h2<\/code> element’s index count to 5<\/code> and another-counter<\/code> to 10<\/code>.<\/p>\n\n\n\n If there isn’t an active counter with that name, counter-set<\/code> will initiate it at 0<\/code>.<\/p>\n<\/div>\n\n\n\nIncrement counters: counter-increment<\/code><\/h3>\n\n\nRight now, we have our counter, but it will stagnate at 0<\/code> since we haven’t set which elements should increment it. We can use the counter-increment property for that, which takes the name of the counter and how much it should be incremented by. If we only write the counter’s name, it will increment it by 1<\/code>.<\/p>\n\n\n\n In this case, we want each h2<\/code> title to increment the counter by one, and that should be as easy as setting counter-increment<\/code> to the counter’s name:<\/p>\n\n\n\nh2 {\n counter-increment: index;\n \/* same as *\/\n counter-increment: index 1;\n}<\/code><\/pre>\n\n\n\nJust like with counter-reset<\/code>, we can increment several counters at once in a space-separated list:<\/p>\n\n\n\nh2 {\n counter-increment: index another-counter 2;\n}<\/code><\/pre>\n\n\n\nThis will increment index<\/code> by one and another-counter<\/code> by two on each h2<\/code> element.<\/p>\n\n\n\n If there isn’t an active counter with that name, counter-increment<\/code> will initiate it at 0<\/code>.<\/p>\n<\/div>\n<\/div>\n\n\n\n\nOutput simple lists: counter()<\/code><\/h3>\n\n\nSo far, we won’t see any change in the counter representation. The counters are counting<\/em> but not showing<\/em>, so to output the counter’s result we use the counter()<\/code><\/a> and counters()<\/code><\/a> functions. Yes, those are two functions with similar names but important differences.<\/p>\n\n\n\n The counter()<\/code> function takes the name of a counter and outputs its content as a string. If many active counters have the same name, it will select the one that is defined closest to the element, so we can only output one counter at a time.<\/p>\n\n\n\n As mentioned earlier, we can set an element’s display<\/code> to list-item<\/code> to work with its ::marker<\/code> pseudo-element:<\/p>\n\n\n\n h2 {\n display: list-item;\n}<\/code><\/pre>\n\n\n\nThen, we can use counter()<\/code> in its content<\/code> property to output the current count. This allows us to prefix and suffix the counter by writing a string before or after the counter()<\/code> function:<\/p>\n\n\n\nh2::marker {\n content: \"Part \" counter(index) \": \";\n}<\/code><\/pre>\n\n\n\n<\/figure>\n\n\n\nAlternatively, we can use the everyday ::before<\/code> pseudo-element to the same effect:<\/p>\n\n\n\nh2::before {\n content: \"Part \" counter(index) \": \";\n}<\/code><\/pre>\n<\/div>\n\n\n\nOutput nested lists: counters()<\/code><\/h3>\n\n\ncounter()<\/code> works great for most situations, but what if we wanted to do a nested list like this:<\/p>\n\n\n\n1. Paradise Beaches\n 1.1. Hawaiian Islands\n 1.2. Caribbean Getaway\n 1.2.1. Aruba\n 1.2.2. Barbados\n2. Outdoor Escapades\n 2.1 National Park Hike\n 2.2. Mountain Skiing Trip<\/code><\/pre>\n\n\n\nWe would need to initiate individual counters and write different counter()<\/code> functions for each level of nesting, and that’s only possible if we know how deep the nesting goes, which we simply don’t at times.<\/p>\n\n\n\n In this case, we use the counters()<\/code> function, which also takes the name of a counter as an argument but instead of just outputting its content, it will join all active counters with that name into a single string and output it. To do so, it takes a string as a second argument, usually something like a dot (\".\"<\/code>) or dash (\"-\"<\/code>) that will be used between counters to join them.<\/p>\n\n\n\n We can use counter-reset<\/code> and counter-increment<\/code> to initiate a counter for each ol<\/code> element, while each li<\/code> will increment its closest counter by 1:<\/p>\n\n\n\nol {\n counter-reset: item;\n}\n\nli {\n counter-increment: item;\n}<\/code><\/pre>\n\n\n\nBut this time, instead of using counter()<\/code> (which would only display one counter per item), we will use counters()<\/code> to join all active counters by a string (e.g. \".<\/code>“) and output them at once:<\/p>\n\n\n\nli::marker {\n content: counters(item, \".\") \". \";\n}<\/code><\/pre>\n\n\n\n<\/figure>\n<\/div>\n<\/div>\n\n\n\n\nStyling Counters<\/h3>\n\n\nBoth the counter()<\/code> and counters()<\/code> functions accept one additional, yet optional, last argument representing the counter style, the same ones we use in the list-style-type<\/code> property. So in our last two examples, we could change the counter styles to Roman numbers and alphabetic letters, respectively:<\/p>\n\n\n\n h2::marker {\n content: \"Part \" counter(index, upper-roman) \": \";\n}<\/code><\/pre>\n\n\n\n<\/figure>\n\n\n\nli::marker {\n content: counters(item, \".\", lower-alpha) \". \";\n}<\/code><\/pre>\n\n\n\n<\/figure>\n<\/div>\n\n\n\nReverse Counters<\/h3>\n\n\nIt’s possible to count backward using custom counters, but we need to know beforehand the number of elements we’ll count. So for example, if we want to make a Top Five list in reversed order:<\/p>\n\n\n\n <h1>Best rated animation movies<\/h1>\n\n<ol>\n <li>Toy Story 2<\/li>\n <li>Toy Story 1<\/li>\n <li>Finding Nemo<\/li>\n <li>How to Train your Dragon<\/li>\n <li>Inside Out<\/li>\n<\/ol><\/code><\/pre>\n\n\n\nWe have to initiate our counter at the total number of elements plus one (so it doesn’t end at 0<\/code>):<\/p>\n\n\n\n ol {\n counter-reset: movies 6;\n}<\/code><\/pre>\n\n\n\nAnd then set the increment to a negative integer:<\/p>\n\n\n\n li {\n counter-increment: movies -1;\n}<\/code><\/pre>\n\n\n\nTo output the count we use counter()<\/code> as we did before:<\/p>\n\n\n\n li::marker {\n content: counter(movies) \". \";\n}<\/code><\/pre>\n\n\n\n<\/figure>\n\n\n\nThere is also a way to write reversed counters supported in Firefox, but it hasn’t shipped to any other browser<\/strong>. Using the reversed()<\/code> functional notation, we can wrap the counter name while initiating it to say it should be reversed.<\/p>\n\n\n\n ol {\n counter-reset: reversed(movies);\n}\n\nli {\n counter-increment: movies;\n}\n\nli::marker {\n content: counter(movies) \" .\";\n}<\/code><\/pre>\n<\/div>\n<\/div>\n\n\n<\/details>\n\n\n\n \n Styling Custom Counters<\/h2>\n <\/summary>\n \n\n\n<\/baseline-status>\n\n\n\nThe last section was all about custom counters: we changed from where they started and how they increased, but at the end of the day, their output was styled in one of the browser’s built-in counter styles, usually decimal<\/code>. Now using @counter-style<\/code><\/a>, we’ll build our own counter styles to style any list.<\/p>\n\n\n\n The @counter-style<\/code> at-rule, as its name implies, lets you create custom counter styles. After writing the at-rule it takes a custom ident as a name:<\/p>\n\n\n\n @counter-style my-counter-style {\n \/* etc. *\/\n}<\/code><\/pre>\n\n\n\nThat name can be used inside the properties and functions that take a counter style, such as list-style-type<\/code> or the last argument in counter()<\/code> and counters()<\/code>:<\/p>\n\n\n\nul {\n list-style-type: my-counter-style;\n}\n\nli::marker {\n content: counter(my-counter, my-counter-style) \". \";\n}<\/code><\/pre>\n\n\n\nWhat do we write inside @counter-style<\/code>? Descriptors! How many descriptors? Honestly, a lot. Just look at this quick review of all of them:<\/p>\n\n\n\n\nsystem<\/code>:<\/strong> specifies which algorithm will be used to construct the counter\u2019s string representation. (Obligatory)<\/li>\n\n\n\n negative<\/code>:<\/strong> specifies the counter representation if the counter value is negative. (Optional)<\/li>\n\n\n\n prefix<\/code>:<\/strong> specifies a character that will be attached before<\/strong> the marker representation and any negative sign. (Optional)<\/li>\n\n\n\n suffix<\/code>:<\/strong> specifies a character that will be attached after<\/strong> the marker representation and any negative sign. (Optional)<\/li>\n\n\n\n range<\/code>:<\/strong> specifies the range in which the custom counter is used. Counter values outside the range will drop to their fallback<\/code> counter style. (Optional)<\/li>\n\n\n\n pad<\/code>:<\/strong> specifies a minimum width all representations have to reach. Representations shorter than the minimum are padded with a character. (Optional)<\/li>\n\n\n\n fallback<\/code>:<\/strong> specifies a fallback counter used whenever a counter style can’t represent a counter value. (Optional)<\/li>\n\n\n\n symbols<\/code>:<\/strong> specifies the symbols used by the construction system<\/code> algorithm. It’s obligatory unless the system<\/code> is set to additive<\/code> or extends<\/code>.<\/li>\n\n\n\n additive-symbols<\/code>:<\/strong> specifies the symbols used by the construction algorithm when the system<\/code> descriptor is set to additive<\/code>.<\/li>\n\n\n\nspeak-as<\/code>:<\/strong> specifies how screen readers should read the counter style. (Optional)<\/li>\n<\/ul>\n\n\n\nHowever, I’ll focus on the required descriptors first: system<\/code>, symbols<\/code> and additive-symbols<\/code>.<\/p>\n\n\n\n\nThe system<\/code> descriptor<\/h3>\n\n\nThe symbols<\/code> or additive-symbols<\/code> descriptors define the characters used for the counter style, while system<\/code> says how to use them.<\/p>\n\n\n\n The valid system<\/code> values are:<\/p>\n\n\n\n\ncyclic<\/code><\/li>\n\n\n\n alphabetic<\/code><\/li>\n\n\n\n symbolic<\/code><\/li>\n\n\n\n additive<\/code><\/li>\n\n\n\n fixed<\/code><\/li>\n\n\n\nextends<\/code><\/li>\n<\/ul>\n\n\n\ncyclic<\/code><\/strong> will go through the characters set on symbols<\/code> and repeat them. We can use just one character in the symbols<\/code> to mimic a bullet list:<\/p>\n\n\n\n @counter-style cyclic-example {\n system: cyclic;\n symbols: \"\u23f5\";\n suffix: \" \";\n}<\/code><\/pre>\n\n\n\n\nbread<\/li>\n\n\n\n butter<\/li>\n\n\n\n milk<\/li>\n\n\n\n apples<\/li>\n<\/ul>\n\n\n\nOr alternate between two or more characters:<\/p>\n\n\n\n @counter-style cyclic-example {\n system: cyclic;\n symbols: \"🔸\" \"🔹\";\n suffix: \" \";\n}<\/code><\/pre>\n\n\n\n<\/figure>\n\n\n\nfixed<\/code><\/strong> will write the characters in symbols<\/code> descriptor just one time. In the last example, only the first two items will have a custom counter if set to fixed<\/code>, while the others will drop to their fallback<\/code>, which is decimal by default.<\/p>\n\n\n\n @counter-style multiple-example {\n system: fixed;\n symbols: \"🔸\" \"🔹\";\n suffix: \" \";\n}<\/code><\/pre>\n\n\n\n<\/figure>\n\n\n\nWe can set when the custom counters start by appending an <integer><\/code> to the fixed<\/code> value. For example, the following custom counter will start at the fourth item:<\/p>\n\n\n\n @counter-style fixed-example {\n system: fixed 4;\n symbols: \"💠\";\n suffix: \" \";\n}<\/code><\/pre>\n\n\n\n<\/figure>\n\n\n\nnumeric<\/code><\/strong> will numerate list items using a custom positional system<\/strong> (base-2, base-8, base-16, etc.). Positional systems start at 0, so the first character at symbols<\/code> will be used as 0, the next as 1, and so on. Knowing this, we can make an ordered list using non-decimal numerical systems like hexadecimal:<\/p>\n\n\n\n @counter-style numeric-example {\n system: numeric;\n symbols: \"0\" \"1\" \"2\" \"3\" \"4\" \"5\" \"6\" \"7\" \"8\" \"9\" \"A\" \"B\" \"C\" \"D\" \"E\" \"F\";\n suffix: \". \";\n}<\/code><\/pre>\n\n\n\n\nbread<\/li>\n\n\n\n butter<\/li>\n\n\n\n milk<\/li>\n\n\n\n apples <\/li>\n<\/ol>\n\n\n\nalphabetic<\/code><\/strong> will enumerate the list items using a custom alphabetical system. It’s similar to the numeric system but with the key difference that it doesn’t have a character for 0, so the next digits are just repeated. For example, if our symbols<\/code> are \"A\" \"B\" \"C\"<\/code> they will wrap to \"AA\", \"AB\", \"AC\"<\/code>, then BA, BB, BC<\/code> and so on.<\/p>\n\n\n\n Since there is no equivalent for 0 and negative values, they will drop down to their fallback.<\/p>\n\n\n\n @counter-style alphabetic-example {\n system: alphabetic;\n symbols: \"A\" \"B\" \"C\";\n suffix: \". \";\n}<\/code><\/pre>\n\n\n\n\nbread<\/li>\n\n\n\n butter<\/li>\n\n\n\n milk<\/li>\n\n\n\n apples<\/li>\n\n\n\n cinnamon<\/li>\n<\/ol>\n\n\n\nsymbolic<\/code><\/strong> will go through the characters in symbols<\/code> repeating them one more time each iteration. So for example, if our symbols<\/code> are \"A\", \"B\", \"C\"<\/code>, it will go “A”, “B”, and “C”, double them in the next iteration as “AA”, “BB”, and “CC”, then triple them as “AAA”, “BBB”, “CCC” and so on.<\/p>\n\n\n\n Since there is no equivalent for 0 and negative values, they will drop down to their fallback.<\/p>\n\n\n\n @counter-style symbolic-example {\n system: symbolic;\n symbols: \"A\" \"B\" \"C\";\n suffix: \". \";\n}<\/code><\/pre>\n\n\n\n\nbread<\/li>\n\n\n\n butter<\/li>\n\n\n\n milk<\/li>\n\n\n\n apples<\/li>\n\n\n\n cinnamon<\/li>\n<\/ol>\n\n\n\nadditive<\/code><\/strong> will give characters a numerical value and add them together to get the counter representation. You can think of it as the way we usually count bills: if we have only $5, $2, and $1 bills, we will add them together to get the desired quantity, trying to keep the number of bills used at a minimum. So to represent 10, we will use two $5 bills instead of ten $1 bills.<\/p>\n\n\n\n Since there is no equivalent for negative values, they will drop down to their fallback.<\/p>\n\n\n\n @counter-style additive\u00a0-example {\n system: additive;\n additive-symbols: 5 \"5️⃣\", 2 \"2️⃣\", 1 \"1️⃣\";\n suffix: \" \";\n}<\/code><\/pre>\n\n\n\n<\/figure>\n\n\n\nNotice how we use additive-symbols<\/code> when the system is additive<\/code>, while we use just symbols<\/code> for the previous systems.<\/p>\n<\/div>\n\n\n\n \nextends<\/code><\/strong> will create a custom style from another one but with modifications. To do so, it takes a <counter-style-name><\/code> after the extends<\/code> value. For example, we could change the decimal<\/code> counter style default’s suffix<\/code> to a closing parenthesis (\")\"<\/code>)`:<\/p>\n\n\n\n @counter-style extends-example {\n system: extends decimal;\n suffix: \") \";\n}<\/code><\/pre>\n\n\n\n\nbread<\/li>\n\n\n\n butter<\/li>\n\n\n\n milk<\/li>\n\n\n\n cinnamon<\/li>\n<\/ol>\n\n\n\nPer spec, “If a @counter-style<\/code> uses the extends<\/code> system, it must not contain a symbols<\/code> or additive-symbols<\/code> descriptor, or else the @counter-style<\/code> rule is invalid.”<\/p>\n\n\n The other descriptors<\/h3>\n\n\nThe negative<\/code><\/strong> descriptor allows us to create a custom representation for a list’s negative values. It can take one or two characters: The first one is prepended to the counter, and by default it’s the hyphen-minus<\/em> (\"-\"<\/code>). The second one is appended to the symbol. For example, we could enclose negative representations into parenthesis (2), (1), 0, 1, 2<\/code>:<\/p>\n\n\n\n @counter-style negative-example {\n system: extends decimal;\n negative: \"(\" \")\";\n}<\/code><\/pre>\n\n\n\n\nbread<\/li>\n\n\n\n butter<\/li>\n\n\n\n milk<\/li>\n\n\n\n apples<\/li>\n<\/ol>\n\n\n\nThe prefix<\/code><\/strong> and suffix<\/code><\/strong> descriptors allow us to prepend and append, respectively, a character to the counter representation. We can use it to add a character at the beginning of each counter using prefix<\/code>:<\/p>\n\n\n\n @counter-style prefix-suffix-example {\n system: extends decimal;\n prefix: \"(\";\n suffix: \") \";\n}<\/code><\/pre>\n\n\n\n\nbread<\/li>\n\n\n\n butter<\/li>\n\n\n\n milk<\/li>\n\n\n\n apples<\/li>\n<\/ul>\n\n\n\nThe range<\/code><\/strong> descriptor defines an inclusive<\/strong> range in which the counter style is used. We can define a bounded range by writing one <integer><\/code> next to another. For example, a range of 2 4 will affect elements 2, 3, and 4:<\/p>\n\n\n\n @counter-style range-example {\n system: cyclic;\n symbols: \"\u2023\";\n suffix: \" \";\n range: 2 4;\n}<\/code><\/pre>\n\n\n\n\nbread<\/li>\n\n\n\n butter<\/li>\n\n\n\n milk<\/li>\n\n\n\n apples<\/li>\n\n\n\n cinnamon<\/li>\n<\/ul>\n\n\n\nOn the other hand, using the infinite<\/code> value we can unbound the range to one side. For example, we could write infinite <\/code>3 so all items up to 3 have a counter style:<\/p>\n\n\n\n @counter-style range-example {\n system: alphabetic;\n symbols: \"A\" \"B\" \"C\";\n suffix: \". \";\n range: infinite 3;\n}<\/code><\/pre>\n\n\n\n\nbread<\/li>\n\n\n\n butter<\/li>\n\n\n\n milk<\/li>\n\n\n\n apples<\/li>\n\n\n\n cinnamon<\/li>\n<\/ul>\n\n\n\nThe pad<\/code> descriptor takes an <integer><\/code> that represents the minimum width for the counter and a character to pad it. For example, a zero-padded counter style would look like the following:<\/p>\n\n\n\n @counter-style pad-example {\n system: extends decimal;\n pad: 3 \"0\";\n}<\/code><\/pre>\n\n\n\n\nbread<\/li>\n\n\n\n butter<\/li>\n\n\n\n milk<\/li>\n\n\n\n apples<\/li>\n<\/ul>\n\n\n\nThe fallback<\/code><\/strong> descriptor allows you to define which counter style should be used as a fallback whenever we can’t represent a specific count. For example, the following counter style is fixed<\/code> and will fallback to lower-roman<\/code> after the sixth item:<\/p>\n\n\n\n @counter-style fallback-example {\n system: fixed;\n symbols: \"\u2680\" \"\u2681\" \"\u2682\" \"\u2683\";\n fallback: lower-roman;\n}<\/code><\/pre>\n\n\n\n\nbread<\/li>\n\n\n\n butter<\/li>\n\n\n\n milk<\/li>\n\n\n\n apples<\/li>\n\n\n\n cinnamon<\/li>\n<\/ul>\n\n\n\nLastly, the speak-as<\/code> descriptor hints to speech readers on how the counter style should be read. It can be:<\/p>\n\n\n\n \nauto<\/code> Uses the system<\/code> default.<\/li>\n\n\n\n bullets<\/code> reads an unordered list. By default, cyclic<\/code> systems are read as bullets<\/code><\/li>\n\n\n\n numbers<\/code> reads the counter’s numeric value in the content language. By default, additive<\/code>, fixed<\/code>, numeric<\/code>, and, symbolic<\/code> are read as numbers<\/code>.<\/li>\n\n\n\n words<\/code> reads the counter representation as words.<\/li>\n\n\n\n spell-out<\/code> reads the counter representation letter by letter. By default, alphabetic<\/code> is read as spell-out<\/code>.<\/li>\n\n\n\n <counter-style-name><\/code> It will use that counter’s speak-as<\/code> value.<\/li>\n<\/ul>\n\n\n\n@counter-style speak-as-example {\n system: extends decimal;\n prefix: \"Item \";\n suffix: \" is \";\n speak-as: words;\n}<\/code><\/pre>\n\n\nsymbols()<\/code><\/h3>\n\n\nThe symbols()<\/code> function defines an only-use counter style without the need to do a whole @counter-style<\/code><\/a>, but at the cost of missing some features. It can be used inside the list-style-type<\/code><\/a> property and the counter()<\/code> and counters()<\/code> functions.<\/p>\n\n\n\n ol {\n list-style-type: symbols(cyclic \"🥬\");\n}<\/code><\/pre>\n\n\n\nHowever, its browser support is appalling since it’s only supported in Firefox.<\/p>\n<\/div>\n<\/div>\n\n\n<\/details>\n\n\n\n \n Images in Counters<\/h2>\n <\/summary>\n \n\nIn theory, there are four ways to add images to lists:<\/p>\n\n\n\n\nlist-style-image<\/code> property<\/li>\n\n\n\n content<\/code> property<\/li>\n\n\n\n symbols<\/code> descriptor in @counter-style<\/code><\/li>\n\n\n\nsymbols()<\/code> function.<\/li>\n<\/ol>\n\n\n\nIn practice, the only supported ways are using list-style-image<\/code> and content<\/code>, since support for images in @counter-style<\/code> and support in general for symbols()<\/code> isn’t the best<\/em> (it’s pretty bad).<\/p>\n\n\n\n\nlist-style-image<\/code><\/h3>\n\n\nThe list-style-image<\/code> can take an image or a gradient. In this case, we want to focus on images but gradients can also be used to create custom square bullets:<\/p>\n\n\n\n li {\n list-style-image: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);\n}<\/code><\/pre>\n\n\n\n\nbread<\/li>\n\n\n\n butter<\/li>\n\n\n\n milk<\/li>\n\n\n\n apples<\/li>\n<\/ul>\n\n\n\nSadly, changing the shape would require styling more the ::marker<\/code> and this isn’t currently possible.<\/p>\n\n\n\n To use an image, we pass its url()<\/code>, make sure is small enough to work as a counter:<\/p>\n\n\n\n li {\n list-style-image: url(\".\/logo.svg\");\n}<\/code><\/pre>\n\n\n\n\nbread<\/li>\n\n\n\n milk<\/li>\n\n\n\n butter<\/li>\n\n\n\n apples<\/li>\n<\/ul>\n<\/div>\n\n\n\ncontent<\/code><\/h3>\n\n\nThe content<\/code> property works similar to list-style-image<\/code>: we pass the image’s url()<\/code> and provide a little padding on the left as an empty string:<\/p>\n\n\n\n li::marker {\n content: url(\".\/logo.svg\") \" \";\n}<\/code><\/pre>\n\n\n\n<\/figure>\n<\/div>\n<\/div>\n\n\n<\/details>\n\n\n\n \n Spacing Things Out<\/h2>\n <\/summary>\n \n\nYou may notice in the last part how the image \u2014 depending on its size \u2014 isn’t completely centered on the text, and also that we provide an empty string on content<\/code> properties for spacing instead of giving things either a padding<\/code> or margin<\/code>. Well, there’s an explanation for all of this, as since spacing is one of the biggest pain points when it comes to styling lists.<\/p>\n\n\n\n \nMargins and paddings are wacky<\/em><\/h3>\n\n\nSpacing the ::marker<\/code> from the list item should be as easy as increasing the marker’s or list margin<\/code>, but in reality, it takes a lot more work.<\/p>\n\n\n\n First, the padding<\/code> and margin<\/code> properties aren’t allowed in ::marker<\/code>. While lists have two types of elements: the list wrapper (usually ol<\/code> or ul<\/code>) and the list item (li<\/code>), each with a default padding<\/code> and margin<\/code>. Which should we use?<\/p>\n\n\n\n You can test each property in this demo by \u0160ime Vidas in his article dedicated to the gap after the list marker<\/a>:<\/p>\n\n\n\n CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>You’ll notice how the only property that affects the spacing within <code>::marker<\/code> and the text is the <code>li<\/code> item’s <code>padding<\/code> property, while the rest of the spacing properties will move the entire list item. Another thing to note is even when the <code>padding<\/code> is set to <code>0px<\/code>, there is a space after the <code>::marker<\/code>. This is set by browsers and will vary depending on which browser you’re using.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><h3 class=\"wp-block-heading\" id=\"-list-style-position-\"><code>list-style-position<\/code><\/h3>\n\n\n\n<baseline-status class=\"wp-block-css-tricks-baseline-status\" featureId=\"list-style\"><\/baseline-status>\n\n\n\n<p>One last thing you may notice in the demo is a checkbox for the <code>list-style-position<\/code> property, and how once you set it to <code>inside<\/code>, the <code>::marker<\/code> will move to the inside of the box, at the cost of removing any spacing given by the list item’s padding.<\/p>\n\n\n\n<p>By default, markers are rendered <em>outside<\/em> the <code>ul<\/code> element’s box. A lot of times, this isn’t the best behavior: markers sneak out of elements, <code>text-align<\/code> won’t align the marker, and paradoxically, centered lists with <code>flex<\/code> or <code>grid<\/code> won’t look completely centered since the markers are outside the box.<\/p>\n\n\n\n<p>To change this we can use the <code>list-style-position<\/code> property, it can be either <code>outside<\/code> (default) and <code>inside<\/code> to define where to position the list marker: either outside or the outside of the <code>ul<\/code> box.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">ul {\n border: solid 2px red;\n}\n\n.inside {\n list-style-position: inside;\n}\n\n.outside {\n list-style-position: outside;\n}<\/code><\/pre>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<ul class=\"wp-block-list ticss-48102d1c is-style-default\">\n<li>bread<\/li>\n\n\n\n<li>butter<\/li>\n<\/ul>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<ul class=\"wp-block-list ticss-ac9a63f2 is-style-default\">\n<li>milk<\/li>\n\n\n\n<li>apple<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><h3 class=\"wp-block-heading\" id=\"-content-and-empty-strings-as-suffixes\"><code>content<\/code> with empty strings<\/h3>\n\n\n<p>In the same article, \u0160ime says:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>Appending a space to <code>content<\/code> feels more like a workaround than the optimal solution.<\/p>\n<\/blockquote>\n\n\n\n<p>And I completely agree that’s true, but just using <code>::marker<\/code> there isn’t a <em>correct<\/em> way to add spacing between the <code>::marker<\/code> and the list text, especially since most people prefer to set <code>list-style-position<\/code> to <code>inside<\/code>. So, as much as it pains me to say it, the simplest way to increase the gap after the marker is to suffix the content property with an empty string:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">li::marker {\n content: \"\u2022 \";\n}<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list ticss-79ca89ea is-style-almanac-list\">\n<li>bread<\/li>\n\n\n\n<li>milk<\/li>\n\n\n\n<li>butter<\/li>\n\n\n\n<li>apples<\/li>\n<\/ul>\n\n\n\n<p>BUT! This is only if we want to be purists and stick with the <code>::marker<\/code> pseudo-element because, in reality, there is a much better way to position that marker: <strong>not using it at all<\/strong>.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><h3 class=\"wp-block-heading\" id=\"just-use-before-\">Just use <code>::before<\/code><\/h3>\n\n\n<p>There is a reason people love using the <code>::before<\/code> more than <code>::marker<\/code>. First, we can’t use something like CSS Grid or Flexbox since changing the display of <code>li<\/code> to something other than <code>list-item<\/code> will remove the <code>::marker<\/code>, and we can set the <code>::marker<\/code>‘s height or width properties to better align it.<\/p>\n\n\n\n<p>Let’s be real, <code>::marker<\/code> works fine when we just want simple styling. But we are not here for simple styling! Once we want something more involved, <code>::marker<\/code> will fall short and we’ll have to use the <code>::before<\/code> pseudo-element.<\/p>\n\n\n\n<p>Using <code>::before<\/code> means we can use Flexbox, which allows for two things we couldn’t do before:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Vertically center the marker with the text<\/li>\n\n\n\n<li>Easily increase the gap after the marker<\/li>\n<\/ul>\n\n\n\n<p>Both can be achieved with Flexbox:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">li {\n display: flex;\n align-items: center; \/* Vertically center the marker *\/\n gap: 20px; \/* Increases the gap *\/\n\n list-style-type: none;\n}<\/code><\/pre>\n\n\n\n<p>The original <code>::marker<\/code> is removed by changing the <code>display<\/code>.<\/p>\n<\/div>\n<\/div>\n\n\n<\/details>\n\n\n<details >\n <summary>\n <h2>Accesibility<\/h2>\n <\/summary>\n \n\n<p>In a previous section we turned things that weren’t lists into seemingly looking lists, so the question arises: <em>should<\/em> we actually do that? Doesn’t it hurt accessibility to make something look like a list when it isn’t one? As always, <em>it depends<\/em>. For a visual user, all the examples in this entry look all right, but for assistive technology users, some examples lack the necessary markup for accessible navigation.<\/p>\n\n\n\n<p>Take for example our initial demo. Here, listing titles serves as decoration since the markup structure is given by the titles themselves. It’s the same deal for the counting siblings demo from earlier, as assistive technology users can read the document through the title structure.<\/p>\n\n\n\n<p>However, this is the exception rather than the norm. That means a couple of the examples we looked at would fail if we need the list to be announced as a list in assistive technology, like screen readers. For example this list we looked at earlier:<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\"><div class=\"index\">\n <h2>The Old Buccaneer<\/h2>\n <h2>The Sea Cook<\/h2>\n <h2>My Shore Adventure<\/h2>\n <h2>The Log Cabin<\/h2>\n <h2>My Sea Adventure<\/h2>\n <h2>Captain Silver<\/h2>\n<\/div><\/code><\/pre>\n\n\n\n<p>…should be written as a list instead:<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\"><ul class=\"index\">\n <li>The Old Buccaneer<\/li>\n <li>The Sea Cook<\/li>\n <li>My Shore Adventure<\/li>\n <li>The Log Cabin<\/li>\n <li>My Sea Adventure<\/li>\n <li>Captain Silver<\/li>\n<\/ul><\/code><\/pre>\n\n\n\n<p>Listing elements is rarely used just as decoration, so as a rule of thumb, use lists in the markup even if you are planning to change them with CSS.<\/p>\n\n\n<\/details>\n\n\n<details >\n <summary>\n <h2>Almanac References<\/h2>\n <\/summary>\n \n<h3 class=\"wp-block-heading\" id=\"list-properties\">List Properties<\/h3>\n\n\n \t\t\n <div class=\"in-article-cards\">\n <article class=\"in-article-card \" id=\"mini-post-14067\">\n\n <time datetime=\"2011-09-05\" title=\"Originally published Sep 5, 2011\">\n <strong>\n \n Almanac\n <\/strong>\n\n on\n\n Apr 23, 2021 <\/time>\n\n <h3>\n <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/l\/list-style\/\">\n list-style <\/a>\n <\/h3>\n\n <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/l\/list-style\/\" class=\"almanac-example\">\n <code class=\"language-css\">ul { list-style: square outside none; }<\/code>\n <\/a>\n \n <div class=\"tags\">\n <a href=\"https:\/\/css-tricks.com\/tag\/list-style\/\" rel=\"tag\">list-style<\/a> <a href=\"https:\/\/css-tricks.com\/tag\/list-style-position\/\" rel=\"tag\">list-style-position<\/a> <a href=\"https:\/\/css-tricks.com\/tag\/list-style-type\/\" rel=\"tag\">list-style-type<\/a> <\/div>\n \n <div class=\"author-row\">\n <a href=\"https:\/\/css-tricks.com\/author\/saracope\/\" aria-label=\"Author page of Sara Cope\">\n <img alt='' src='https:\/\/css-tricks.com\/wp-content\/cache\/breeze-extra\/gravatars\/82ba1e1fe4aca49cdcd66ff387fee32e787abbd0ae6d42750be22ea7c89a5102' srcset='https:\/\/css-tricks.com\/wp-content\/cache\/breeze-extra\/gravatars\/82ba1e1fe4aca49cdcd66ff387fee32e787abbd0ae6d42750be22ea7c89a5102 2x' class='avatar avatar-80 photo' height='80' width='80' \/> <\/a>\n \n <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/saracope\/\">\n Sara Cope <\/a>\n <\/div>\n\n<\/article>\n <\/div>\n \n\n\n<h3 class=\"wp-block-heading\" id=\"counters\">Counters<\/h3>\n\n\n \t\t\n <div class=\"in-article-cards\">\n <article class=\"in-article-card \" id=\"mini-post-14035\">\n\n <time datetime=\"2011-09-05\" title=\"Originally published Sep 5, 2011\">\n <strong>\n \n Almanac\n <\/strong>\n\n on\n\n Feb 4, 2025 <\/time>\n\n <h3>\n <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/c\/counter-reset\/\">\n counter-reset <\/a>\n <\/h3>\n\n <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/c\/counter-reset\/\" class=\"almanac-example\">\n <code class=\"language-css\">article { counter-reset: section; }<\/code>\n <\/a>\n \n \n <div class=\"author-row\">\n <a href=\"https:\/\/css-tricks.com\/author\/saracope\/\" aria-label=\"Author page of Sara Cope\">\n <img alt='' src='https:\/\/css-tricks.com\/wp-content\/cache\/breeze-extra\/gravatars\/82ba1e1fe4aca49cdcd66ff387fee32e787abbd0ae6d42750be22ea7c89a5102' srcset='https:\/\/css-tricks.com\/wp-content\/cache\/breeze-extra\/gravatars\/82ba1e1fe4aca49cdcd66ff387fee32e787abbd0ae6d42750be22ea7c89a5102 2x' class='avatar avatar-80 photo' height='80' width='80' \/> <\/a>\n \n <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/saracope\/\">\n Sara Cope <\/a>\n <\/div>\n\n<\/article>\n<article class=\"in-article-card \" id=\"mini-post-14033\">\n\n <time datetime=\"2011-09-05\" title=\"Originally published Sep 5, 2011\">\n <strong>\n \n Almanac\n <\/strong>\n\n on\n\n Apr 19, 2025 <\/time>\n\n <h3>\n <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/c\/counter-increment\/\">\n counter-increment <\/a>\n <\/h3>\n\n <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/c\/counter-increment\/\" class=\"almanac-example\">\n <code class=\"language-css\">.step { counter-increment: my-awesome-counter; }<\/code>\n <\/a>\n \n <div class=\"tags\">\n <a href=\"https:\/\/css-tricks.com\/tag\/counter-increment\/\" rel=\"tag\">counter-increment<\/a> <a href=\"https:\/\/css-tricks.com\/tag\/counters\/\" rel=\"tag\">counters<\/a> <a href=\"https:\/\/css-tricks.com\/tag\/lists\/\" rel=\"tag\">lists<\/a> <\/div>\n \n <div class=\"author-row\">\n <a href=\"https:\/\/css-tricks.com\/author\/saracope\/\" aria-label=\"Author page of Sara Cope\">\n <img alt='' src='https:\/\/css-tricks.com\/wp-content\/cache\/breeze-extra\/gravatars\/82ba1e1fe4aca49cdcd66ff387fee32e787abbd0ae6d42750be22ea7c89a5102' srcset='https:\/\/css-tricks.com\/wp-content\/cache\/breeze-extra\/gravatars\/82ba1e1fe4aca49cdcd66ff387fee32e787abbd0ae6d42750be22ea7c89a5102 2x' class='avatar avatar-80 photo' height='80' width='80' \/> <\/a>\n \n <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/saracope\/\">\n Sara Cope <\/a>\n <\/div>\n\n<\/article>\n<article class=\"in-article-card \" id=\"mini-post-321345\">\n\n <time datetime=\"2020-09-17\" title=\"Originally published Sep 17, 2020\">\n <strong>\n \n Almanac\n <\/strong>\n\n on\n\n Apr 23, 2021 <\/time>\n\n <h3>\n <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/c\/counter-set\/\">\n counter-set <\/a>\n <\/h3>\n\n <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/c\/counter-set\/\" class=\"almanac-example\">\n <code class=\"language-css\">h2:first-of-type::before { counter-set: chapter; }<\/code>\n <\/a>\n \n \n <div class=\"author-row\">\n <a href=\"https:\/\/css-tricks.com\/author\/geoffgraham\/\" aria-label=\"Author page of Geoff Graham\">\n <img alt='' src='https:\/\/css-tricks.com\/wp-content\/cache\/breeze-extra\/gravatars\/a8e040142716a4b44d014d80fbcf99c635b1d8faabfe469b6954a8ef2f168595' srcset='https:\/\/css-tricks.com\/wp-content\/cache\/breeze-extra\/gravatars\/a8e040142716a4b44d014d80fbcf99c635b1d8faabfe469b6954a8ef2f168595 2x' class='avatar avatar-80 photo' height='80' width='80' \/> <\/a>\n \n <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/geoffgraham\/\">\n Geoff Graham <\/a>\n <\/div>\n\n<\/article>\n<article class=\"in-article-card \" id=\"mini-post-384018\">\n\n <time datetime=\"2025-02-04\" title=\"Originally published Feb 4, 2025\">\n <strong>\n \n Almanac\n <\/strong>\n\n on\n\n Feb 4, 2025 <\/time>\n\n <h3>\n <a href=\"https:\/\/css-tricks.com\/almanac\/functions\/c\/counter\/\">\n counter() <\/a>\n <\/h3>\n\n <a href=\"https:\/\/css-tricks.com\/almanac\/functions\/c\/counter\/\" class=\"almanac-example\">\n <code class=\"language-css\">h2::before { content: counter(my-counter, upper-roman) \". \"; }<\/code>\n <\/a>\n \n <div class=\"tags\">\n <a href=\"https:\/\/css-tricks.com\/tag\/lists\/\" rel=\"tag\">lists<\/a> <\/div>\n \n <div class=\"author-row\">\n <a href=\"https:\/\/css-tricks.com\/author\/monknow\/\" aria-label=\"Author page of Juan Diego Rodr\u00edguez\">\n <img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" alt=\"\" class=\"avatar avatar-80 photo avatar-default\" height=\"80\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/cache\/breeze-extra\/gravatars\/juan-diego-rodriguez-80x80.png?resize=80%2C80&ssl=1\" width=\"80\"> <\/a>\n \n <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/monknow\/\">\n Juan Diego Rodr\u00edguez <\/a>\n <\/div>\n\n<\/article>\n<article class=\"in-article-card \" id=\"mini-post-384071\">\n\n <time datetime=\"2025-02-04\" title=\"Originally published Feb 4, 2025\">\n <strong>\n \n Almanac\n <\/strong>\n\n on\n\n Feb 4, 2025 <\/time>\n\n <h3>\n <a href=\"https:\/\/css-tricks.com\/almanac\/functions\/c\/counters\/\">\n counters() <\/a>\n <\/h3>\n\n <a href=\"https:\/\/css-tricks.com\/almanac\/functions\/c\/counters\/\" class=\"almanac-example\">\n <code class=\"language-css\">li::marker { content: counters(item, \".\") \") \"; }<\/code>\n <\/a>\n \n <div class=\"tags\">\n <a href=\"https:\/\/css-tricks.com\/tag\/lists\/\" rel=\"tag\">lists<\/a> <\/div>\n \n <div class=\"author-row\">\n <a href=\"https:\/\/css-tricks.com\/author\/monknow\/\" aria-label=\"Author page of Juan Diego Rodr\u00edguez\">\n <img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" alt=\"\" class=\"avatar avatar-80 photo avatar-default\" height=\"80\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/cache\/breeze-extra\/gravatars\/juan-diego-rodriguez-80x80.png?resize=80%2C80&ssl=1\" width=\"80\"> <\/a>\n \n <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/monknow\/\">\n Juan Diego Rodr\u00edguez <\/a>\n <\/div>\n\n<\/article>\n <\/div>\n \n\n\n<h3 class=\"wp-block-heading\" id=\"custom-counter-styles\">Custom Counter Styles<\/h3>\n\n\n \t\t\n <div class=\"in-article-cards\">\n <article class=\"in-article-card \" id=\"mini-post-383552\">\n\n <time datetime=\"2025-01-16\" title=\"Originally published Jan 16, 2025\">\n <strong>\n \n Almanac\n <\/strong>\n\n on\n\n Jan 28, 2025 <\/time>\n\n <h3>\n <a href=\"https:\/\/css-tricks.com\/almanac\/rules\/c\/counter-style\/\">\n @counter-style <\/a>\n <\/h3>\n\n <a href=\"https:\/\/css-tricks.com\/almanac\/rules\/c\/counter-style\/\" class=\"almanac-example\">\n <code class=\"language-css\">@counter-style apple-counter { ... }<\/code>\n <\/a>\n \n <div class=\"tags\">\n <a href=\"https:\/\/css-tricks.com\/tag\/lists\/\" rel=\"tag\">lists<\/a> <\/div>\n \n <div class=\"author-row\">\n <a href=\"https:\/\/css-tricks.com\/author\/monknow\/\" aria-label=\"Author page of Juan Diego Rodr\u00edguez\">\n <img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" alt=\"\" class=\"avatar avatar-80 photo avatar-default\" height=\"80\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/cache\/breeze-extra\/gravatars\/juan-diego-rodriguez-80x80.png?resize=80%2C80&ssl=1\" width=\"80\"> <\/a>\n \n <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/monknow\/\">\n Juan Diego Rodr\u00edguez <\/a>\n <\/div>\n\n<\/article>\n<article class=\"in-article-card \" id=\"mini-post-383918\">\n\n <time datetime=\"2025-01-30\" title=\"Originally published Jan 30, 2025\">\n <strong>\n \n Almanac\n <\/strong>\n\n on\n\n Jan 30, 2025 <\/time>\n\n <h3>\n <a href=\"https:\/\/css-tricks.com\/almanac\/functions\/s\/symbols\/\">\n symbols() <\/a>\n <\/h3>\n\n <a href=\"https:\/\/css-tricks.com\/almanac\/functions\/s\/symbols\/\" class=\"almanac-example\">\n <code class=\"language-css\">ul { list-style: symbols(cyclic \"🥬\"); }<\/code>\n <\/a>\n \n <div class=\"tags\">\n <a href=\"https:\/\/css-tricks.com\/tag\/counters\/\" rel=\"tag\">counters<\/a> <\/div>\n \n <div class=\"author-row\">\n <a href=\"https:\/\/css-tricks.com\/author\/monknow\/\" aria-label=\"Author page of Juan Diego Rodr\u00edguez\">\n <img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" alt=\"\" class=\"avatar avatar-80 photo avatar-default\" height=\"80\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/cache\/breeze-extra\/gravatars\/juan-diego-rodriguez-80x80.png?resize=80%2C80&ssl=1\" width=\"80\"> <\/a>\n \n <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/monknow\/\">\n Juan Diego Rodr\u00edguez <\/a>\n <\/div>\n\n<\/article>\n <\/div>\n \n\n\n<h3 class=\"wp-block-heading\" id=\"pseudoelements\">Pseudo-Elements<\/h3>\n\n\n \t\t\n <div class=\"in-article-cards\">\n <article class=\"in-article-card \" id=\"mini-post-205997\">\n\n <time datetime=\"2015-08-03\" title=\"Originally published Aug 3, 2015\">\n <strong>\n \n Almanac\n <\/strong>\n\n on\n\n Jan 19, 2025 <\/time>\n\n <h3>\n <a href=\"https:\/\/css-tricks.com\/almanac\/pseudo-selectors\/m\/marker\/\">\n ::marker <\/a>\n <\/h3>\n\n <a href=\"https:\/\/css-tricks.com\/almanac\/pseudo-selectors\/m\/marker\/\" class=\"almanac-example\">\n <code class=\"language-css\">li::marker { color: red; }<\/code>\n <\/a>\n \n \n <div class=\"author-row\">\n <a href=\"https:\/\/css-tricks.com\/author\/geoffgraham\/\" aria-label=\"Author page of Geoff Graham\">\n <img alt='' src='https:\/\/css-tricks.com\/wp-content\/cache\/breeze-extra\/gravatars\/a8e040142716a4b44d014d80fbcf99c635b1d8faabfe469b6954a8ef2f168595' srcset='https:\/\/css-tricks.com\/wp-content\/cache\/breeze-extra\/gravatars\/a8e040142716a4b44d014d80fbcf99c635b1d8faabfe469b6954a8ef2f168595 2x' class='avatar avatar-80 photo' height='80' width='80' \/> <\/a>\n \n <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/geoffgraham\/\">\n Geoff Graham <\/a>\n <\/div>\n\n<\/article>\n<article class=\"in-article-card \" id=\"mini-post-14158\">\n\n <time datetime=\"2011-09-06\" title=\"Originally published Sep 6, 2011\">\n <strong>\n \n Almanac\n <\/strong>\n\n on\n\n Sep 13, 2024 <\/time>\n\n <h3>\n <a href=\"https:\/\/css-tricks.com\/almanac\/pseudo-selectors\/b\/after-and-before\/\">\n ::before \/ ::after <\/a>\n <\/h3>\n\n <a href=\"https:\/\/css-tricks.com\/almanac\/pseudo-selectors\/b\/after-and-before\/\" class=\"almanac-example\">\n <code class=\"language-css\">.element::before { content: \"Yo!\"; }<\/code>\n <\/a>\n \n <div class=\"tags\">\n <a href=\"https:\/\/css-tricks.com\/tag\/psuedo-elements\/\" rel=\"tag\">psuedo elements<\/a> <\/div>\n \n <div class=\"author-row\">\n <a href=\"https:\/\/css-tricks.com\/author\/saracope\/\" aria-label=\"Author page of Sara Cope\">\n <img alt='' src='https:\/\/css-tricks.com\/wp-content\/cache\/breeze-extra\/gravatars\/82ba1e1fe4aca49cdcd66ff387fee32e787abbd0ae6d42750be22ea7c89a5102' srcset='https:\/\/css-tricks.com\/wp-content\/cache\/breeze-extra\/gravatars\/82ba1e1fe4aca49cdcd66ff387fee32e787abbd0ae6d42750be22ea7c89a5102 2x' class='avatar avatar-80 photo' height='80' width='80' \/> <\/a>\n \n <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/saracope\/\">\n Sara Cope <\/a>\n <\/div>\n\n<\/article>\n <\/div>\n \n\n\n<\/details>\n\n\n<details >\n <summary>\n <h2>More Tutorials & Tricks!<\/h2>\n <\/summary>\n \n\n \t\t\n <div class=\"in-article-cards\">\n <article class=\"in-article-card articles\" id=\"mini-post-307060\">\n\n <time datetime=\"2020-05-05\" title=\"Originally published May 5, 2020\">\n <strong>\n \n Article\n <\/strong>\n\n on\n\n May 5, 2020 <\/time>\n\n <h3>\n <a href=\"https:\/\/css-tricks.com\/list-style-recipes\/\">\n List Style Recipes <\/a>\n <\/h3>\n\n \n <div class=\"tags\">\n <a href=\"https:\/\/css-tricks.com\/tag\/list\/\" rel=\"tag\">list<\/a> <a href=\"https:\/\/css-tricks.com\/tag\/list-style-image\/\" rel=\"tag\">list-style-image<\/a> <a href=\"https:\/\/css-tricks.com\/tag\/list-style-position\/\" rel=\"tag\">list-style-position<\/a> <a href=\"https:\/\/css-tricks.com\/tag\/list-style-type\/\" rel=\"tag\">list-style-type<\/a> <a href=\"https:\/\/css-tricks.com\/tag\/marker\/\" rel=\"tag\">marker<\/a> <\/div>\n \n <div class=\"author-row\">\n <a href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\" aria-label=\"Author page of Chris Coyier\">\n <img alt='' src='https:\/\/css-tricks.com\/wp-content\/cache\/breeze-extra\/gravatars\/41a6f9778d12dfedcc7ec3727d64a12491d75d9a65d4b9323feb075391ae6795' srcset='https:\/\/css-tricks.com\/wp-content\/cache\/breeze-extra\/gravatars\/41a6f9778d12dfedcc7ec3727d64a12491d75d9a65d4b9323feb075391ae6795 2x' class='avatar avatar-80 photo' height='80' width='80' \/> <\/a>\n \n <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\">\n Chris Coyier <\/a>\n <\/div>\n\n<\/article>\n<article class=\"in-article-card articles\" id=\"mini-post-339298\">\n\n <time datetime=\"2021-04-29\" title=\"Originally published Apr 29, 2021\">\n <strong>\n \n Article\n <\/strong>\n\n on\n\n Apr 29, 2021 <\/time>\n\n <h3>\n <a href=\"https:\/\/css-tricks.com\/list-markers-and-string-styles\/\">\n List Markers and String Styles <\/a>\n <\/h3>\n\n \n <div class=\"tags\">\n <a href=\"https:\/\/css-tricks.com\/tag\/list-style\/\" rel=\"tag\">list-style<\/a> <a href=\"https:\/\/css-tricks.com\/tag\/list-style-type\/\" rel=\"tag\">list-style-type<\/a> <a href=\"https:\/\/css-tricks.com\/tag\/lists\/\" rel=\"tag\">lists<\/a> <a href=\"https:\/\/css-tricks.com\/tag\/marker\/\" rel=\"tag\">marker<\/a> <\/div>\n \n <div class=\"author-row\">\n <a href=\"https:\/\/css-tricks.com\/author\/ericmeyer\/\" aria-label=\"Author page of Eric Meyer\">\n <img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" alt=\"\" class=\"avatar avatar-80 photo avatar-default\" height=\"80\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/cache\/breeze-extra\/gravatars\/O6oMcV8M_400x400-80x80.png?resize=80%2C80&ssl=1\" width=\"80\"> <\/a>\n \n <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/ericmeyer\/\">\n Eric Meyer <\/a>\n <\/div>\n\n<\/article>\n<article class=\"in-article-card articles\" id=\"mini-post-248040\">\n\n <time datetime=\"2016-11-21\" title=\"Originally published Nov 21, 2016\">\n <strong>\n \n Article\n <\/strong>\n\n on\n\n May 19, 2018 <\/time>\n\n <h3>\n <a href=\"https:\/\/css-tricks.com\/style-list-markers-css\/\">\n Style List Markers in CSS <\/a>\n <\/h3>\n\n \n <div class=\"tags\">\n <a href=\"https:\/\/css-tricks.com\/tag\/list\/\" rel=\"tag\">list<\/a> <a href=\"https:\/\/css-tricks.com\/tag\/marker\/\" rel=\"tag\">marker<\/a> <\/div>\n \n <div class=\"author-row\">\n <a href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\" aria-label=\"Author page of Chris Coyier\">\n <img alt='' src='https:\/\/css-tricks.com\/wp-content\/cache\/breeze-extra\/gravatars\/41a6f9778d12dfedcc7ec3727d64a12491d75d9a65d4b9323feb075391ae6795' srcset='https:\/\/css-tricks.com\/wp-content\/cache\/breeze-extra\/gravatars\/41a6f9778d12dfedcc7ec3727d64a12491d75d9a65d4b9323feb075391ae6795 2x' class='avatar avatar-80 photo' height='80' width='80' \/> <\/a>\n \n <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\">\n Chris Coyier <\/a>\n <\/div>\n\n<\/article>\n<article class=\"in-article-card articles\" id=\"mini-post-312104\">\n\n <time datetime=\"2020-06-11\" title=\"Originally published Jun 11, 2020\">\n <strong>\n \n Article\n <\/strong>\n\n on\n\n Jun 11, 2020 <\/time>\n\n <h3>\n <a href=\"https:\/\/css-tricks.com\/how-to-reverse-css-custom-counters\/\">\n How to Reverse CSS Custom Counters <\/a>\n <\/h3>\n\n \n <div class=\"tags\">\n <a href=\"https:\/\/css-tricks.com\/tag\/counter-increment\/\" rel=\"tag\">counter-increment<\/a> <a href=\"https:\/\/css-tricks.com\/tag\/counters\/\" rel=\"tag\">counters<\/a> <a href=\"https:\/\/css-tricks.com\/tag\/lists\/\" rel=\"tag\">lists<\/a> <\/div>\n \n <div class=\"author-row\">\n <a href=\"https:\/\/css-tricks.com\/author\/etinosaobaseki\/\" aria-label=\"Author page of Etinosa Obaseki\">\n <img alt='' src='https:\/\/css-tricks.com\/wp-content\/cache\/breeze-extra\/gravatars\/9213588070fdd33ca69ffe0b2255f4ca9486f6ac9d7d0b1c66cdd1843fc93b2f' srcset='https:\/\/css-tricks.com\/wp-content\/cache\/breeze-extra\/gravatars\/9213588070fdd33ca69ffe0b2255f4ca9486f6ac9d7d0b1c66cdd1843fc93b2f 2x' class='avatar avatar-80 photo' height='80' width='80' \/> <\/a>\n \n <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/etinosaobaseki\/\">\n Etinosa Obaseki <\/a>\n <\/div>\n\n<\/article>\n<article class=\"in-article-card articles\" id=\"mini-post-383776\">\n\n <time datetime=\"2025-01-23\" title=\"Originally published Jan 23, 2025\">\n <strong>\n \n Article\n <\/strong>\n\n on\n\n Jan 23, 2025 <\/time>\n\n <h3>\n <a href=\"https:\/\/css-tricks.com\/some-things-you-might-not-know-about-custom-counter-styles\/\">\n Some Things You Might Not Know About Custom Counter Styles <\/a>\n <\/h3>\n\n \n <div class=\"tags\">\n <a href=\"https:\/\/css-tricks.com\/tag\/lists\/\" rel=\"tag\">lists<\/a> <\/div>\n \n <div class=\"author-row\">\n <a href=\"https:\/\/css-tricks.com\/author\/geoffgraham\/\" aria-label=\"Author page of Geoff Graham\">\n <img alt='' src='https:\/\/css-tricks.com\/wp-content\/cache\/breeze-extra\/gravatars\/a8e040142716a4b44d014d80fbcf99c635b1d8faabfe469b6954a8ef2f168595' srcset='https:\/\/css-tricks.com\/wp-content\/cache\/breeze-extra\/gravatars\/a8e040142716a4b44d014d80fbcf99c635b1d8faabfe469b6954a8ef2f168595 2x' class='avatar avatar-80 photo' height='80' width='80' \/> <\/a>\n \n <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/geoffgraham\/\">\n Geoff Graham <\/a>\n <\/div>\n\n<\/article>\n<article class=\"in-article-card articles\" id=\"mini-post-270643\">\n\n <time datetime=\"2018-05-18\" title=\"Originally published May 18, 2018\">\n <strong>\n \n Article\n <\/strong>\n\n on\n\n Jan 26, 2022 <\/time>\n\n <h3>\n <a href=\"https:\/\/css-tricks.com\/css-counters-custom-list-number-styling\/\">\n Using CSS Counters for Custom List Number Styling <\/a>\n <\/h3>\n\n \n <div class=\"tags\">\n <a href=\"https:\/\/css-tricks.com\/tag\/counters\/\" rel=\"tag\">counters<\/a> <a href=\"https:\/\/css-tricks.com\/tag\/lists\/\" rel=\"tag\">lists<\/a> <a href=\"https:\/\/css-tricks.com\/tag\/marker\/\" rel=\"tag\">marker<\/a> <\/div>\n \n <div class=\"author-row\">\n <a href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\" aria-label=\"Author page of Chris Coyier\">\n <img alt='' src='https:\/\/css-tricks.com\/wp-content\/cache\/breeze-extra\/gravatars\/41a6f9778d12dfedcc7ec3727d64a12491d75d9a65d4b9323feb075391ae6795' srcset='https:\/\/css-tricks.com\/wp-content\/cache\/breeze-extra\/gravatars\/41a6f9778d12dfedcc7ec3727d64a12491d75d9a65d4b9323feb075391ae6795 2x' class='avatar avatar-80 photo' height='80' width='80' \/> <\/a>\n \n <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\">\n Chris Coyier <\/a>\n <\/div>\n\n<\/article>\n<article class=\"in-article-card articles\" id=\"mini-post-376748\">\n\n <time datetime=\"2023-03-02\" title=\"Originally published Mar 2, 2023\">\n <strong>\n \n Article\n <\/strong>\n\n on\n\n May 17, 2024 <\/time>\n\n <h3>\n <a href=\"https:\/\/css-tricks.com\/everything-you-need-to-know-about-the-gap-after-the-list-marker\/\">\n Everything You Need to Know About the Gap After the List Marker <\/a>\n <\/h3>\n\n \n <div class=\"tags\">\n <a href=\"https:\/\/css-tricks.com\/tag\/list-style\/\" rel=\"tag\">list-style<\/a> <a href=\"https:\/\/css-tricks.com\/tag\/lists\/\" rel=\"tag\">lists<\/a> <a href=\"https:\/\/css-tricks.com\/tag\/marker\/\" rel=\"tag\">marker<\/a> <\/div>\n \n <div class=\"author-row\">\n <a href=\"https:\/\/css-tricks.com\/author\/simevidas\/\" aria-label=\"Author page of \u0160ime Vidas\">\n <img alt='' src='https:\/\/css-tricks.com\/wp-content\/cache\/breeze-extra\/gravatars\/d3d4cf63a73b4adf1e1546248adbdabf1dae3c42b1f2c342fd260448f37d946c' srcset='https:\/\/css-tricks.com\/wp-content\/cache\/breeze-extra\/gravatars\/d3d4cf63a73b4adf1e1546248adbdabf1dae3c42b1f2c342fd260448f37d946c 2x' class='avatar avatar-80 photo' height='80' width='80' \/> <\/a>\n \n <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/simevidas\/\">\n \u0160ime Vidas <\/a>\n <\/div>\n\n<\/article>\n <\/div>\n \n\n\n<\/details>","protected":false},"excerpt":{"rendered":"<p>Going from the most basic ways to style lists directly in HTML to advanced customization techniques that are even capable of making things that aren’t lists look like lists.<\/p>\n","protected":false},"author":288740,"featured_media":385292,"comment_status":"open","ping_status":"closed","sticky":false,"template":"guide-special.php","format":"standard","meta":{"_acf_changed":false,"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"_share_on_mastodon":"1","_share_on_mastodon_status":"A massive guide on styling counters... going from the most basic ways to style lists directly in HTML to advanced CSS techniques that are capable of making things that aren't lists look like lists.\r\n\r\n%permalink%"},"categories":[18847],"tags":[1378,969],"class_list":["post-384529","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-guides","tag-counters","tag-lists"],"acf":{"show_toc":"No"},"share_on_mastodon":{"url":"https:\/\/mastodon.social\/@csstricks\/114178700438108323","error":""},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2025\/03\/guide-styling-counters-2.jpg?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":270643,"url":"https:\/\/css-tricks.com\/css-counters-custom-list-number-styling\/","url_meta":{"origin":384529,"position":0},"title":"Using CSS Counters for Custom List Number Styling","author":"Chris Coyier","date":"May 18, 2018","format":false,"excerpt":"How about a classic CSS trick! Getting custom styling on lists isn't even so tricky anymore, since CSS counters have introduced\u00a0counter-increment and counter-reset, and that is perfect for this. I just wanted to make sure you knew how it works and had some easy-to-copy examples at the ready. Let's say\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/05\/custom-list-style.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/05\/custom-list-style.jpg?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/05\/custom-list-style.jpg?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/05\/custom-list-style.jpg?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/05\/custom-list-style.jpg?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":9534,"url":"https:\/\/css-tricks.com\/styling-list-markers\/","url_meta":{"origin":384529,"position":1},"title":"Styling List Markers","author":"Chris Coyier","date":"May 25, 2011","format":false,"excerpt":"Have you ever tried to style the numbers in an ordered list? You end up doing dumb stuff like wrapping the insides in spans, styling the list items, then removing that styling with the span. Or using background images in crazy ways. Or removing the list styling and putting in\u2026","rel":"","context":"In "Links"","block_context":{"text":"Links","link":"https:\/\/css-tricks.com\/category\/links\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":312104,"url":"https:\/\/css-tricks.com\/how-to-reverse-css-custom-counters\/","url_meta":{"origin":384529,"position":2},"title":"How to Reverse CSS Custom Counters","author":"Etinosa Obaseki","date":"June 11, 2020","format":false,"excerpt":"I needed a numbered list of blog posts to be listed with the last\/high first and going down from there. Like this: 5. Post Title 4. Post Title 3. Post Title 2. Post Title 1. Post Title But the above is just text. I wanted to do this with a\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/06\/css-counter-reversed.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/06\/css-counter-reversed.png?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/06\/css-counter-reversed.png?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/06\/css-counter-reversed.png?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/06\/css-counter-reversed.png?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":248040,"url":"https:\/\/css-tricks.com\/style-list-markers-css\/","url_meta":{"origin":384529,"position":3},"title":"Style List Markers in CSS","author":"Chris Coyier","date":"November 21, 2016","format":false,"excerpt":"It's a perfectly reasonable to want to style the marker of list items. You know: blue bullets with black text in an unordered list. Or red counters with knockout white numbers in an ordered list. There is a working draft spec that defines a ::marker pseudo-element that would give us\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2016\/11\/styled-list-items.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2016\/11\/styled-list-items.png?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2016\/11\/styled-list-items.png?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2016\/11\/styled-list-items.png?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2016\/11\/styled-list-items.png?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":298638,"url":"https:\/\/css-tricks.com\/finally-it-will-be-easy-to-change-the-color-of-list-bullets\/","url_meta":{"origin":384529,"position":4},"title":"Finally, it Will Be Easy to Change the Color of List Bullets","author":"Chris Coyier","date":"November 14, 2019","format":false,"excerpt":"In my germinating years, the general advice was this: List item li { color: red; } \/* bullet *\/ li span { color: black; } \/* text *\/ Not terrible, but not great. You're \"resetting\" everything at the span level, so it gets more complicated the more you do. Things\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/11\/shapes-and-stuff.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/11\/shapes-and-stuff.png?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/11\/shapes-and-stuff.png?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/11\/shapes-and-stuff.png?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/11\/shapes-and-stuff.png?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":385404,"url":"https:\/\/css-tricks.com\/css-tricks-chronicles-xliii\/","url_meta":{"origin":384529,"position":5},"title":"CSS-Tricks Chronicles XLIII","author":"Geoff Graham","date":"April 11, 2025","format":false,"excerpt":"This CSS-Tricks update highlights significant progress in the Almanac, recent podcast appearances, a new CSS counters guide, and the addition of several new authors contributing valuable content.","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2025\/03\/chronicles-XXXVIII.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2025\/03\/chronicles-XXXVIII.jpg?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2025\/03\/chronicles-XXXVIII.jpg?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2025\/03\/chronicles-XXXVIII.jpg?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2025\/03\/chronicles-XXXVIII.jpg?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/384529","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/288740"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=384529"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/384529\/revisions"}],"predecessor-version":[{"id":386897,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/384529\/revisions\/386897"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/385292"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=384529"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=384529"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=384529"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}