{"id":67912,"date":"2019-07-09T04:19:26","date_gmt":"2019-07-09T11:19:26","guid":{"rendered":"http:\/\/www.taterboy.com\/blog\/2019\/07\/css-lists-markers-and-counters\/"},"modified":"2019-07-09T04:19:26","modified_gmt":"2019-07-09T11:19:26","slug":"css-lists-markers-and-counters","status":"publish","type":"post","link":"https:\/\/www.taterboy.com\/blog\/2019\/07\/css-lists-markers-and-counters\/","title":{"rendered":"CSS Lists, Markers, And Counters"},"content":{"rendered":"<link rel=\"canonical\" href=\"https:\/\/www.smashingmagazine.com\/2019\/07\/css-lists-markers-counters\/\"><title>CSS Lists, Markers, And Counters<\/title><\/p>\n<article>\n<header>\n<h1>CSS Lists, Markers, And Counters<\/h1>\n<address>Rachel Andrew<\/address>\n<p>                  <time datetime=\"2019-07-09T12:30:59+02:00\">2019-07-09T12:30:59+02:00<\/time><time datetime=\"2019-07-09T11:06:16+00:00\">2019-07-09T11:06:16+00:00<\/time><\/header>\n<p>Lists in CSS have particular properties which give us the standard list styling we expect. An unordered list gains a list bullet, of the type <code>disc<\/code>, and ordered lists are numbered. My interest in exploring lists in more detail came from some work I did to document the <code>::marker<\/code> pseudo-element for MDN. This pseudo-element ships in Firefox 68 and is <strong>being released today<\/strong>. With the <code>::marker<\/code> pseudo element available to us, we can start to do some interesting things with lists, and in this article, I\u2019ll explain more.<\/p>\n<h3>Deconstructing A List<\/h3>\n<p>You may not have thought much about lists, although we use them frequently in our markup. Many things can be marked up quite logically as a list. While step-by-step instructions or ranked elements may naturally be described by an ordered list <code><\/p>\n<ol><\/code>, many things in a design can be described using an unordered list <code><\/p>\n<ul><\/code>. A very common usage of the element, for example, is to mark up navigation, as it is a list of destinations on the site. For our exploration, let\u2019s start by finding out exactly what a list is in CSS.<\/p>\n<p>As with many things in CSS, lists have some initial values applied to them. These values make them look like a list. These special values begin with the information that a list item has the <code>display<\/code> property with a value of <code>list-item<\/code>. This creates a block-level box, with an additional marker box. The marker box is where the list bullet or number is added.<\/p>\n<div data-component=\"FeaturePanel\" data-audience=\"non-subscriber\" data-remove=\"true\"><\/div>\n<p>Lists were defined early on in CSS, and much of the definition of lists as we use them today is from CSS2. <a href=\"https:\/\/www.w3.org\/TR\/CSS2\/generate.html#lists\">The CSS2 specification describes a list item<\/a> as follows:<\/p>\n<blockquote><p>\u201cAn element with <code>display: list-item<\/code> generates a principal block box for the element\u2019s content and, depending on the values of <code>list-style-type<\/code> and<br \/>\n<code>list-style-image<\/code>, possibly also a marker box as a visual indication that the element is a list item.\u201d<\/p><\/blockquote>\n<p>The <em>principal block box<\/em> is the main box of the element and contains all of the children as a list item can contain other markup. The marker box is then placed in respect to this principal box. The specification goes on to detail the fact that any background color will be only behind this principal box, and not the marker. Also that the marker can be set to one of a range of pre-defined values:<\/p>\n<ul>\n<li><code>disc<\/code><\/li>\n<li><code>circle<\/code><\/li>\n<li><code>square<\/code><\/li>\n<li><code>decimal<\/code><\/li>\n<li><code>decimal-leading-zero<\/code><\/li>\n<li><code>lower-roman<\/code><\/li>\n<li><code>upper-roman<\/code><\/li>\n<li><code>lower-greek<\/code><\/li>\n<li><code>lower-latin<\/code><\/li>\n<li><code>upper-latin<\/code><\/li>\n<li><code>armenian<\/code><\/li>\n<li><code>georgian<\/code><\/li>\n<li><code>lower-alpha<\/code><\/li>\n<li><code>upper-alpha<\/code><\/li>\n<li><code>none<\/code><\/li>\n<li><code>inherit<\/code><\/li>\n<\/ul>\n<p>The Level 3 display specification <a href=\"https:\/\/drafts.csswg.org\/css-display\/#list-items\">defines <code>display: list-item<\/code><\/a> along with the other possible values for the <code>display<\/code> property. It refers back to CSS 2.1 \u2014 as do many CSS properties and values which come from CSS2 \u2014 but describes the <code>list-item<\/code> keyword as, \u201ccausing the element to generate a <code>::marker<\/code> pseudo-element\u201d.<\/p>\n<p>The Level 3 specification also introduces the ability to create an inline list item with the two value syntax being used <code>display: inline list-item<\/code>. This is as yet unimplemented by browsers.<\/p>\n<h3>Creating Marker Boxes On Non-List Items<\/h3>\n<p>As with other values of <code>display<\/code>, it is perfectly valid to give any HTML element a display type of <code>list-item<\/code> (should you wish to generate a <code>::marker<\/code> pseudo-element on the item). This will not cause the element to <em>become<\/em> a list item semantically, but instead it will only visually display as a list item, and therefore be able to have a <code>::marker<\/code>. When we discuss the <code>::marker<\/code> pseudo-element below, you will discover some cases where giving other elements <code>display: list-item<\/code> can be useful.<\/p>\n<h3>The CSS Lists Level 3 Specification: <code>::marker<\/code> And Counters<\/h3>\n<p>The <code>display<\/code> specification expands and clarifies the definition of lists that we find in CSS2, however, there is also a specification which defines list behavior in detail: the <a href=\"https:\/\/www.w3.org\/TR\/css-lists-3\/\">CSS Lists Specification Level 3<\/a>. As the basic behavior of list items is defined in <code>display<\/code>, this specification details the marker box generated when something has <code>display: list-item<\/code> along with the counters which are used by default whenever you create an ordered list. There is some potentially useful functionality accessed via these features.<\/p>\n<div><\/div>\n<h3>The <code>::marker<\/code> Pseudo-Element<\/h3>\n<p>The <code>::marker<\/code> pseudo-element allows you to target the list marker \u2014 separately from the content of the list item. This was not possible in previous versions of CSS, therefore, if you changed the color or font size of the <code>ul<\/code> or <code>li<\/code>, this would also change the color and font size of the markers. In order to do something as seemingly simple as having different color list bullets than text, would involve either wrapping the content of the list item in a span (or using an image for the marker).<\/p>\n<pre><code>ul {\n  color: #00b7a8;\n}\n\nul span {\n  color #333;\n}\n<\/code><\/pre>\n<p>With the <code>::marker<\/code> pseudo element, the simplest thing you might want to try is having a different bullet to text color, which means that instead of the code in the example above you can use:<\/p>\n<pre><code>ul {\n    color: #333;\n}\n\nul ::marker {\n    color: #00b7a8;\n}\n<\/code><\/pre>\n<p>You might also want to use a different size and <code>font-family<\/code> for the numbering on an ordered list.<\/p>\n<pre><code>ol ::marker {\n  font-size: 200%;\n  color: #00b7a8;\n  font-family: \"Comic Sans MS\", cursive, sans-serif;\n}\n<\/code><\/pre>\n<p>You can see all of these in a supporting browser by using my CodePen example:<\/p>\n<figure>\n<p data-height=\"500\" data-theme-id=\"light\" data-slug-hash=\"VJQyoR\" data-user=\"rachelandrew\" data-default-tab=\"result\">See the Pen [Colored bullets with and without marker](https:\/\/codepen.io\/rachelandrew\/penVJQyoR) by <a href=\"https:\/\/codepen.io\/rachelandrew\">Rachel Andrew<\/a>.<\/p><figcaption>See the Pen <a href=\"https:\/\/codepen.io\/rachelandrew\/penVJQyoR\">Colored bullets with and without marker<\/a> by <a href=\"https:\/\/codepen.io\/rachelandrew\">Rachel Andrew<\/a>.<\/figcaption><\/figure>\n<p>You could use the <code>::marker<\/code> pseudo-element on non-list items. In the code below, I have set a heading to <code>display: list-item<\/code>. This gives it a bullet and therefore a <code>::marker<\/code> box to target.<\/p>\n<p>I have changed the bullet to use an emoji:<\/p>\n<pre><code>h1 {\n  display: list-item;\n}\n\nh1::marker {\n  content: \"?\";\n}\n<\/code><\/pre>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/a7bcc3ac-b11a-498d-96f8-115c1a82cd74\/firefox-heading-with-emoji.png?ssl=1\"><\/p>\n<p>    <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/07\/firefox-heading-with-emoji.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/a7bcc3ac-b11a-498d-96f8-115c1a82cd74\/firefox-heading-with-emoji.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/a7bcc3ac-b11a-498d-96f8-115c1a82cd74\/firefox-heading-with-emoji.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/a7bcc3ac-b11a-498d-96f8-115c1a82cd74\/firefox-heading-with-emoji.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/a7bcc3ac-b11a-498d-96f8-115c1a82cd74\/firefox-heading-with-emoji.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/07\/firefox-heading-with-emoji.png?w=900\" sizes=\"100vw\" alt=\" Heading with a cat emoji to the left of it\"><\/a><figcaption>\n      In Firefox, you can see the emoji used as a marker.<br \/>\n    <\/figcaption><\/figure>\n<figure>\n<p data-height=\"500\" data-theme-id=\"light\" data-slug-hash=\"wLyyMG\" data-user=\"rachelandrew\" data-default-tab=\"result\">See the Pen [Heading and marker](https:\/\/codepen.io\/rachelandrew\/pen\/wLyyMG) by <a href=\"https:\/\/codepen.io\/rachelandrew\">Rachel Andrew<\/a>.<\/p><figcaption>See the Pen <a href=\"https:\/\/codepen.io\/rachelandrew\/pen\/wLyyMG\">Heading and marker<\/a> by <a href=\"https:\/\/codepen.io\/rachelandrew\">Rachel Andrew<\/a>.<\/figcaption><\/figure>\n<p>In the above example, I have used generated content in the rules for the marker. Only a small subset of CSS properties is available for use on <code>::marker<\/code>. These include font properties and color, however, they also include the <code>content<\/code> property, for including generated content.<\/p>\n<p>The addition of <code>content<\/code> as an allowed property for <code>::marker<\/code> is recent, however, it is included in the Firefox implementation. The inclusion means that you can do things like include a string of text in a <code>::marker<\/code>. It also raises additional possibilities for formatting of markers when you combine the use of counters with <code>::marker<\/code>.<\/p>\n<h4>Browser Support And Fallbacks<\/h4>\n<p>For browsers that do not support the <code>::marker<\/code> pseudo-element, the fallback is the regular marker that would have been displayed anyway. Unfortunately, we can\u2019t currently use Feature Queries to detect support for selectors such as this pseudo-element right now, although there has been <a href=\"https:\/\/github.com\/w3c\/csswg-drafts\/issues\/3207\">an issue raised<\/a> about adding this to the specification. This means that you can\u2019t fork your code to do one thing when you have support and something else if you do not. In most cases, falling back to the regular marker will be a reasonable solution.<\/p>\n<div><\/div>\n<h3>Counters<\/h3>\n<p>Ordered lists have list numbering \u2014 something which is achieved by way of a CSS Counter. The CSS Lists specification therefore also describes these counters. We can access and create counters ourselves which, combined with the <code>::marker<\/code> pseudo-element can give us some useful functionality. These counters can also be used in regular (non <code>::marker<\/code>) generated content.<\/p>\n<p>If I have a numbered list of steps (and I would like to write out \u201cStep 1\u201d, \u201cStep 2\u201d, and so on), I can do this by using generated content in my marker and appending the <code>list-item<\/code> counter, this represents the built-in counter:<\/p>\n<pre><code>::marker {\n  content: \"Step \" counter(list-item) \": \";\n}\n<\/code><\/pre>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/51d7f1ba-b4d3-4431-b6ce-4e1d6b9e6ae9\/firefox-content.png?ssl=1\"><\/p>\n<p>    <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/07\/firefox-content.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/51d7f1ba-b4d3-4431-b6ce-4e1d6b9e6ae9\/firefox-content.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/51d7f1ba-b4d3-4431-b6ce-4e1d6b9e6ae9\/firefox-content.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/51d7f1ba-b4d3-4431-b6ce-4e1d6b9e6ae9\/firefox-content.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/51d7f1ba-b4d3-4431-b6ce-4e1d6b9e6ae9\/firefox-content.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/07\/firefox-content.png?w=900\" sizes=\"100vw\" alt=\"An ordered list with Step 1, Step 2, and so on, before each list item\"><\/a><figcaption>\n      In Firefox, you will see the counter prefixed with the word \u201cStep\u201d.<br \/>\n    <\/figcaption><\/figure>\n<figure>\n<p data-height=\"500\" data-theme-id=\"light\" data-slug-hash=\"BgRaoz\" data-user=\"rachelandrew\" data-default-tab=\"result\">See the Pen [Counters and marker](https:\/\/codepen.io\/rachelandrew\/pen\/BgRaoz) by <a href=\"https:\/\/codepen.io\/rachelandrew\">Rachel Andrew<\/a>.<\/p><figcaption>See the Pen <a href=\"https:\/\/codepen.io\/rachelandrew\/pen\/BgRaoz\">Counters and marker<\/a> by <a href=\"https:\/\/codepen.io\/rachelandrew\">Rachel Andrew<\/a>.<\/figcaption><\/figure>\n<h4>Nested Counters<\/h4>\n<p>If you have nested lists, a common way to number them is to have the top-level item a whole number, (1), then child items as (1.1, 1.2) and their children (1.1.1, 1.1.2), and so on. You can achieve this by using more functionality of counters.<\/p>\n<p>When you nest HTML lists, you will end up with multiple counters of the same name \u2014 nested inside each other. The nest of counters can be accessed using the <code>counters()<\/code> function.<\/p>\n<p>In the code below, I am using <code>counters()<\/code> to format my list markers as described above. The first argument for <code>counters()<\/code> is the name of the counter to use. I\u2019m using the built-in <code>list-item<\/code> counter. The second argument is a string \u2014 this is what will be concatenated between output counters (I\u2019m using a <code>.<\/code>). Finally, I add a <code>:<\/code> outside of the counter function but inside the value of <code>content<\/code> so that my counter output will be separated from the content by a colon.<\/p>\n<pre><code>::marker {\n  content: counters(list-item,'.') ':';\n  color: #00b7a8;\n  font-weight: bold;\n}\n<\/code><\/pre>\n<p>This gives me the output as in the image. If you are using a browser which supports <code>::marker<\/code> and counters, then you can see it working in the CodePen example \u2014 try changing the string from a <code>.<\/code> to something else to see how that changes the output.<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/da79bf11-735d-47b5-aeab-9f9adca48d37\/firefox-nested-counters.png?ssl=1\"><\/p>\n<p>    <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/07\/firefox-nested-counters.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/da79bf11-735d-47b5-aeab-9f9adca48d37\/firefox-nested-counters.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/da79bf11-735d-47b5-aeab-9f9adca48d37\/firefox-nested-counters.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/da79bf11-735d-47b5-aeab-9f9adca48d37\/firefox-nested-counters.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/da79bf11-735d-47b5-aeab-9f9adca48d37\/firefox-nested-counters.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/07\/firefox-nested-counters.png?w=900\" sizes=\"100vw\" alt=\"A set of nested lists\"><\/a><figcaption>\n      In Firefox, you will see nested list numbering separated by dots.<br \/>\n    <\/figcaption><\/figure>\n<figure>\n<p data-height=\"500\" data-theme-id=\"light\" data-slug-hash=\"VJbwxL\" data-user=\"rachelandrew\" data-default-tab=\"result\">See the Pen [Nested counters](https:\/\/codepen.io\/rachelandrew\/pen\/VJbwxL) by <a href=\"https:\/\/codepen.io\/rachelandrew\">Rachel Andrew<\/a>.<\/p><figcaption>See the Pen <a href=\"https:\/\/codepen.io\/rachelandrew\/pen\/VJbwxL\">Nested counters<\/a> by <a href=\"https:\/\/codepen.io\/rachelandrew\">Rachel Andrew<\/a>.<\/figcaption><\/figure>\n<h4>What\u2019s The Difference Between <code>counter()<\/code> And <code>counters()<\/code>?<\/h4>\n<p>The <code>counter()<\/code> function we used in the first example to write out our steps uses the innermost counter only. Therefore, in the situation where you have a set of nested lists, you will write out the counter which related to the level you are currently on.<\/p>\n<p>The <code>counters()<\/code> function essentially writes out that whole branch and gives you the opportunity to concatenate a string between counters in the branch. So if you have a list item with a counter of <code>2<\/code> (which is part of a list nested inside a list item with a counter of <code>4<\/code>), then the branch contains:<\/p>\n<ul>\n<li><code>4<\/code><\/li>\n<li><code>2<\/code><\/li>\n<\/ul>\n<p>You can output this as <code>4.2<\/code> in the marker by using:<\/p>\n<pre><code>::marker {\n  content: counters(list-item,'.');\n}\n<\/code><\/pre>\n<h3>Counters On Other Elements<\/h3>\n<p>Counters can be used on things which are not lists \u2014 either to output a marker \u2014 in which case the element will need to have <code>display: list-item<\/code> \u2014 or to output regular generated content. Counters are used extensively in book production, in order to enable chapter and figure numbering amount other things. There is no reason not to take a similar approach on the web, in particular for longer articles.<\/p>\n<p>The CSS properties defined in the CSS Lists specification which deal with these counters are:<\/p>\n<ul>\n<li><code>counter-set<\/code><\/li>\n<li><code>counter-reset<\/code><\/li>\n<li><code>counter-increment<\/code><\/li>\n<\/ul>\n<p>To see how these work outside of lists we can look at an example of using counters to number the headings in a document.<\/p>\n<p>The first thing I need to do is to create a counter for headers on the body element \u2014 ready for use. I\u2019m using the <code>counter-reset<\/code> property to do this. The <code>counter-reset<\/code> and <code>counter-set<\/code> properties are very similar. The <code>counter-reset<\/code> property will create a new counter if a counter of the specified name does not already exist, but will also create nested counters as described above if a counter of that name does exist. The <code>counter-set<\/code> property will only create a new counter if there is no counter of that name. For this, use either property would work just fine, however, <code>counter-set<\/code> does not have as good browser support as <code>counter-reset<\/code>, so I am taking the practical route:<\/p>\n<pre><code>body {\n  counter-reset: heading-counter;\n}\n<\/code><\/pre>\n<p>Now that I have a counter, I can then use the <code>counter-increment<\/code> property on the selector for the headers; this should increment the counter every time the selector matches.<\/p>\n<pre><code>h2 {\n  counter-increment: heading-counter;\n}\n<\/code><\/pre>\n<p>To see the value, I need to output it to the document. I can do this by using Generated Content and adding it <code>before<\/code> the heading as shown in the following CodePen example:<\/p>\n<pre><code>h2::before {\n  content: counter(heading-counter) \": \";\n  color: #00b7a8;\n  font-weight: bold;\n}\n<\/code><\/pre>\n<figure>\n<p data-height=\"500\" data-theme-id=\"light\" data-slug-hash=\"gNGjxq\" data-user=\"rachelandrew\" data-default-tab=\"result\">See the Pen [Headings and counters](https:\/\/codepen.io\/rachelandrew\/pen\/gNGjxq) by <a href=\"https:\/\/codepen.io\/rachelandrew\">Rachel Andrew<\/a>.<\/p><figcaption>See the Pen <a href=\"https:\/\/codepen.io\/rachelandrew\/pen\/gNGjxq\">Headings and counters<\/a> by <a href=\"https:\/\/codepen.io\/rachelandrew\">Rachel Andrew<\/a>.<\/figcaption><\/figure>\n<p>Alternatively, I could make the <code>h2<\/code> element into a <code>list-item<\/code> and then use <code>::marker<\/code>, as demonstrated below. As already detailed, using the <code>::marker<\/code> element has limited browser support. In Firefox, you should see the counter used as the marker for the heading, while other browsers will show the default bullet.<\/p>\n<pre><code>h2 {\n  display: list-item;\n}\n\nh2::marker {\n  content: counter(heading-counter)  \": \";\n  color: #00b7a8;\n  font-weight: bold;\n}\n<\/code><\/pre>\n<figure>\n<p data-height=\"500\" data-theme-id=\"light\" data-slug-hash=\"pXWZay\" data-user=\"rachelandrew\" data-default-tab=\"result\">See the Pen [Headings, markers, and counters](https:\/\/codepen.io\/rachelandrew\/pen\/pXWZay) by <a href=\"https:\/\/codepen.io\/rachelandrew\">Rachel Andrew<\/a>.<\/p><figcaption>See the Pen <a href=\"https:\/\/codepen.io\/rachelandrew\/pen\/pXWZay\">Headings, markers, and counters<\/a> by <a href=\"https:\/\/codepen.io\/rachelandrew\">Rachel Andrew<\/a>.<\/figcaption><\/figure>\n<h4>Counters On Form Elements<\/h4>\n<p>There is also a little bit of interactivity that you can achieve using CSS Counters \u2014 something that you might think you need JavaScript to do.<\/p>\n<p>I have a form which has a number of required fields. The required status can be selected in CSS with a <code>:required<\/code> pseudo-class, and the fact that a field has not been completed can be detected by way of the <code>:invalid<\/code> pseudo class. This means that we can check for fields which are both required and invalid, and increment a counter. Then output that as generated content.<\/p>\n<figure>\n<p data-height=\"500\" data-theme-id=\"light\" data-slug-hash=\"vqpJdM\" data-user=\"rachelandrew\" data-default-tab=\"result\">See the Pen [Counting required form fields](https:\/\/codepen.io\/rachelandrew\/pen\/vqpJdM) by <a href=\"https:\/\/codepen.io\/rachelandrew\">Rachel Andrew<\/a>.<\/p><figcaption>See the Pen <a href=\"https:\/\/codepen.io\/rachelandrew\/pen\/vqpJdM\">Counting required form fields<\/a> by <a href=\"https:\/\/codepen.io\/rachelandrew\">Rachel Andrew<\/a>.<\/figcaption><\/figure>\n<p>How useful this is in reality is debatable \u2014 given that we can\u2019t really do anything with that value other than stick it into generated content. There are also concerns with regard to generated content being inaccessible to certain screen readers, therefore any usage that is more than decorative would need to ensure other ways of accessing that information. Read, \u201c<a href=\"https:\/\/tink.uk\/accessibility-support-for-css-generated-content\/\">Accessibility Support For CSS Generated Content<\/a>\u201d and the more recent information, \u201c<a href=\"https:\/\/www.powermapper.com\/tests\/screen-readers\/content\/css-generated-content\/\">CSS Content Property Screen Reader Compatibility<\/a>\u201d for more details regarding accessibility and generated content.<\/p>\n<p>However, it demonstrates that counters can achieve more useful things than simply numbering lists. It may be that one day that knowledge does come in handy to solve some problem you are working on.<\/p>\n<h3>Find Out More<\/h3>\n<p>This article ended up rather a long way from styling lists, despite the fact that everything I have described is found in the CSS Lists specification. You can find more information about the things described in the links below. If you have found an interesting use for CSS Counters, or can think of things you could use <code>::marker<\/code> for, add a note in the comments.<\/p>\n<ul>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/::marker\"><code>::marker<\/code><\/a><\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/counter-set\"><code>counter-set<\/code><\/a><\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/counter-reset\"><code>counter-reset<\/code><\/a><\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/counter-increment\"><code>counter-increment<\/code><\/a><\/li>\n<li>\u201c<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/CSS_Lists_and_Counters\/Using_CSS_counters\">Using CSS Counters<\/a>,\u201d MDN web docs<\/li>\n<li>\u201c<a href=\"https:\/\/css-tricks.com\/counting-css-counters-css-grid\/\">Counting With CSS Counters And CSS Grid<\/a>,\u201d CSS-Tricks<\/li>\n<\/ul>\n<div>\n  <img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/07\/logo-red-6.png?w=900\" alt=\"Smashing Editorial\"><span>(il)<\/span>\n<\/div>\n<\/article>\n<p class=\"wpematico_credit\"><small>Powered by <a href=\"http:\/\/www.wpematico.com\" target=\"_blank\">WPeMatico<\/a><\/small><\/p>\n","protected":false},"excerpt":{"rendered":"<p>CSS Lists, Markers, And Counters CSS Lists, Markers, And Counters Rachel Andrew 2019-07-09T12:30:59+02:002019-07-09T11:06:16+00:00 Lists in CSS have particular properties which give us the standard list styling we expect. An unordered list gains a list bullet, of the type disc, and ordered lists are numbered. My interest in exploring lists in more detail came from some&#8230;<a class=\"moretag\" href=\"https:\/\/www.taterboy.com\/blog\/2019\/07\/css-lists-markers-and-counters\/\"> Read the full article&#8230;<\/a><\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[371],"tags":[],"class_list":["post-67912","post","type-post","status-publish","format-standard","hentry","category-user-experience"],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 5.0.0.1 - aioseo.com -->\n\t<meta name=\"description\" content=\"CSS Lists, Markers, And CountersCSS Lists, Markers, And Counters Rachel Andrew 2019-07-09T12:30:59+02:002019-07-09T11:06:16+00:00Lists in CSS have particular properties which give us the standard list styling we expect. An unordered list gains a list bullet, of the type disc, and ordered lists are numbered. My interest in exploring lists in more detail came from some work I\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<meta name=\"author\" content=\"Guest Contribution\"\/>\n\t<meta name=\"keywords\" content=\"user experience\" \/>\n\t<link rel=\"canonical\" href=\"https:\/\/www.taterboy.com\/blog\/2019\/07\/css-lists-markers-and-counters\/\" \/>\n\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 5.0.0.1\" \/>\n\t\t<meta property=\"og:locale\" content=\"en_US\" \/>\n\t\t<meta property=\"og:site_name\" content=\"Design for Immersive Technologies | User Experience for Games, Virtual Reality (VR) and Augmented\/Mixed Reality (AR\/MR)\" \/>\n\t\t<meta property=\"og:type\" content=\"article\" \/>\n\t\t<meta property=\"og:title\" content=\"CSS Lists, Markers, And Counters | Design for Immersive Technologies\" \/>\n\t\t<meta property=\"og:description\" content=\"CSS Lists, Markers, And CountersCSS Lists, Markers, And Counters Rachel Andrew 2019-07-09T12:30:59+02:002019-07-09T11:06:16+00:00Lists in CSS have particular properties which give us the standard list styling we expect. An unordered list gains a list bullet, of the type disc, and ordered lists are numbered. My interest in exploring lists in more detail came from some work I\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/www.taterboy.com\/blog\/2019\/07\/css-lists-markers-and-counters\/\" \/>\n\t\t<meta property=\"article:published_time\" content=\"2019-07-09T11:19:26+00:00\" \/>\n\t\t<meta property=\"article:modified_time\" content=\"2019-07-09T11:19:26+00:00\" \/>\n\t\t<meta name=\"twitter:card\" content=\"summary\" \/>\n\t\t<meta name=\"twitter:title\" content=\"CSS Lists, Markers, And Counters | Design for Immersive Technologies\" \/>\n\t\t<meta name=\"twitter:description\" content=\"CSS Lists, Markers, And CountersCSS Lists, Markers, And Counters Rachel Andrew 2019-07-09T12:30:59+02:002019-07-09T11:06:16+00:00Lists in CSS have particular properties which give us the standard list styling we expect. An unordered list gains a list bullet, of the type disc, and ordered lists are numbered. My interest in exploring lists in more detail came from some work I\" \/>\n\t\t<script type=\"application\/ld+json\" class=\"aioseo-schema\">\n\t\t\t{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/07\\\/css-lists-markers-and-counters\\\/#article\",\"name\":\"CSS Lists, Markers, And Counters | Design for Immersive Technologies\",\"headline\":\"CSS Lists, Markers, And Counters\",\"author\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/#author\"},\"publisher\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#organization\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"http:\\\/\\\/www.taterboy.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/07\\\/firefox-heading-with-emoji.png\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/07\\\/css-lists-markers-and-counters\\\/#articleImage\"},\"datePublished\":\"2019-07-09T04:19:26-07:00\",\"dateModified\":\"2019-07-09T04:19:26-07:00\",\"inLanguage\":\"en-US\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/07\\\/css-lists-markers-and-counters\\\/#webpage\"},\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/07\\\/css-lists-markers-and-counters\\\/#webpage\"},\"articleSection\":\"User Experience\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/07\\\/css-lists-markers-and-counters\\\/#breadcrumblist\",\"itemListElement\":[{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog#listItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.taterboy.com\\\/blog\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/category\\\/user-experience\\\/#listItem\",\"name\":\"User Experience\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/category\\\/user-experience\\\/#listItem\",\"position\":2,\"name\":\"User Experience\",\"item\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/category\\\/user-experience\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/07\\\/css-lists-markers-and-counters\\\/#listItem\",\"name\":\"CSS Lists, Markers, And Counters\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog#listItem\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/07\\\/css-lists-markers-and-counters\\\/#listItem\",\"position\":3,\"name\":\"CSS Lists, Markers, And Counters\",\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/category\\\/user-experience\\\/#listItem\",\"name\":\"User Experience\"}}]},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#organization\",\"name\":\"Design for Immersive Technologies\",\"description\":\"User Experience for Games, Virtual Reality (VR) and Augmented\\\/Mixed Reality (AR\\\/MR)\",\"url\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/#author\",\"url\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/\",\"name\":\"Guest Contribution\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/07\\\/css-lists-markers-and-counters\\\/#authorImage\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/d2aad73eb0f48c67b141e9fc978a0e498969791ed623346e361d02d19775b0bb?s=96&d=mm&r=g\",\"width\":96,\"height\":96,\"caption\":\"Guest Contribution\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/07\\\/css-lists-markers-and-counters\\\/#webpage\",\"url\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/07\\\/css-lists-markers-and-counters\\\/\",\"name\":\"CSS Lists, Markers, And Counters | Design for Immersive Technologies\",\"description\":\"CSS Lists, Markers, And CountersCSS Lists, Markers, And Counters Rachel Andrew 2019-07-09T12:30:59+02:002019-07-09T11:06:16+00:00Lists in CSS have particular properties which give us the standard list styling we expect. An unordered list gains a list bullet, of the type disc, and ordered lists are numbered. My interest in exploring lists in more detail came from some work I\",\"inLanguage\":\"en-US\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/07\\\/css-lists-markers-and-counters\\\/#breadcrumblist\"},\"author\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/#author\"},\"creator\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/#author\"},\"datePublished\":\"2019-07-09T04:19:26-07:00\",\"dateModified\":\"2019-07-09T04:19:26-07:00\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/\",\"name\":\"Design for Immersive Technologies\",\"description\":\"User Experience for Games, Virtual Reality (VR) and Augmented\\\/Mixed Reality (AR\\\/MR)\",\"inLanguage\":\"en-US\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#organization\"}}]}\n\t\t<\/script>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"CSS Lists, Markers, And Counters | Design for Immersive Technologies","description":"CSS Lists, Markers, And CountersCSS Lists, Markers, And Counters Rachel Andrew 2019-07-09T12:30:59+02:002019-07-09T11:06:16+00:00Lists in CSS have particular properties which give us the standard list styling we expect. An unordered list gains a list bullet, of the type disc, and ordered lists are numbered. My interest in exploring lists in more detail came from some work I","canonical_url":"https:\/\/www.taterboy.com\/blog\/2019\/07\/css-lists-markers-and-counters\/","robots":"max-image-preview:large","keywords":"user experience","webmasterTools":{"miscellaneous":""},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.taterboy.com\/blog\/2019\/07\/css-lists-markers-and-counters\/#article","name":"CSS Lists, Markers, And Counters | Design for Immersive Technologies","headline":"CSS Lists, Markers, And Counters","author":{"@id":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/#author"},"publisher":{"@id":"https:\/\/www.taterboy.com\/blog\/#organization"},"image":{"@type":"ImageObject","url":"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/07\/firefox-heading-with-emoji.png","@id":"https:\/\/www.taterboy.com\/blog\/2019\/07\/css-lists-markers-and-counters\/#articleImage"},"datePublished":"2019-07-09T04:19:26-07:00","dateModified":"2019-07-09T04:19:26-07:00","inLanguage":"en-US","mainEntityOfPage":{"@id":"https:\/\/www.taterboy.com\/blog\/2019\/07\/css-lists-markers-and-counters\/#webpage"},"isPartOf":{"@id":"https:\/\/www.taterboy.com\/blog\/2019\/07\/css-lists-markers-and-counters\/#webpage"},"articleSection":"User Experience"},{"@type":"BreadcrumbList","@id":"https:\/\/www.taterboy.com\/blog\/2019\/07\/css-lists-markers-and-counters\/#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog#listItem","position":1,"name":"Home","item":"https:\/\/www.taterboy.com\/blog","nextItem":{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/#listItem","name":"User Experience"}},{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/#listItem","position":2,"name":"User Experience","item":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/","nextItem":{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/2019\/07\/css-lists-markers-and-counters\/#listItem","name":"CSS Lists, Markers, And Counters"},"previousItem":{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog#listItem","name":"Home"}},{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/2019\/07\/css-lists-markers-and-counters\/#listItem","position":3,"name":"CSS Lists, Markers, And Counters","previousItem":{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/#listItem","name":"User Experience"}}]},{"@type":"Organization","@id":"https:\/\/www.taterboy.com\/blog\/#organization","name":"Design for Immersive Technologies","description":"User Experience for Games, Virtual Reality (VR) and Augmented\/Mixed Reality (AR\/MR)","url":"https:\/\/www.taterboy.com\/blog\/"},{"@type":"Person","@id":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/#author","url":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/","name":"Guest Contribution","image":{"@type":"ImageObject","@id":"https:\/\/www.taterboy.com\/blog\/2019\/07\/css-lists-markers-and-counters\/#authorImage","url":"https:\/\/secure.gravatar.com\/avatar\/d2aad73eb0f48c67b141e9fc978a0e498969791ed623346e361d02d19775b0bb?s=96&d=mm&r=g","width":96,"height":96,"caption":"Guest Contribution"}},{"@type":"WebPage","@id":"https:\/\/www.taterboy.com\/blog\/2019\/07\/css-lists-markers-and-counters\/#webpage","url":"https:\/\/www.taterboy.com\/blog\/2019\/07\/css-lists-markers-and-counters\/","name":"CSS Lists, Markers, And Counters | Design for Immersive Technologies","description":"CSS Lists, Markers, And CountersCSS Lists, Markers, And Counters Rachel Andrew 2019-07-09T12:30:59+02:002019-07-09T11:06:16+00:00Lists in CSS have particular properties which give us the standard list styling we expect. An unordered list gains a list bullet, of the type disc, and ordered lists are numbered. My interest in exploring lists in more detail came from some work I","inLanguage":"en-US","isPartOf":{"@id":"https:\/\/www.taterboy.com\/blog\/#website"},"breadcrumb":{"@id":"https:\/\/www.taterboy.com\/blog\/2019\/07\/css-lists-markers-and-counters\/#breadcrumblist"},"author":{"@id":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/#author"},"creator":{"@id":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/#author"},"datePublished":"2019-07-09T04:19:26-07:00","dateModified":"2019-07-09T04:19:26-07:00"},{"@type":"WebSite","@id":"https:\/\/www.taterboy.com\/blog\/#website","url":"https:\/\/www.taterboy.com\/blog\/","name":"Design for Immersive Technologies","description":"User Experience for Games, Virtual Reality (VR) and Augmented\/Mixed Reality (AR\/MR)","inLanguage":"en-US","publisher":{"@id":"https:\/\/www.taterboy.com\/blog\/#organization"}}]},"og:locale":"en_US","og:site_name":"Design for Immersive Technologies | User Experience for Games, Virtual Reality (VR) and Augmented\/Mixed Reality (AR\/MR)","og:type":"article","og:title":"CSS Lists, Markers, And Counters | Design for Immersive Technologies","og:description":"CSS Lists, Markers, And CountersCSS Lists, Markers, And Counters Rachel Andrew 2019-07-09T12:30:59+02:002019-07-09T11:06:16+00:00Lists in CSS have particular properties which give us the standard list styling we expect. An unordered list gains a list bullet, of the type disc, and ordered lists are numbered. My interest in exploring lists in more detail came from some work I","og:url":"https:\/\/www.taterboy.com\/blog\/2019\/07\/css-lists-markers-and-counters\/","article:published_time":"2019-07-09T11:19:26+00:00","article:modified_time":"2019-07-09T11:19:26+00:00","twitter:card":"summary","twitter:title":"CSS Lists, Markers, And Counters | Design for Immersive Technologies","twitter:description":"CSS Lists, Markers, And CountersCSS Lists, Markers, And Counters Rachel Andrew 2019-07-09T12:30:59+02:002019-07-09T11:06:16+00:00Lists in CSS have particular properties which give us the standard list styling we expect. An unordered list gains a list bullet, of the type disc, and ordered lists are numbered. My interest in exploring lists in more detail came from some work I"},"aioseo_meta_data":{"post_id":"67912","title":null,"description":null,"keywords":null,"keyphrases":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_custom_url":null,"og_image_custom_fields":null,"og_custom_image_width":null,"og_custom_image_height":null,"og_video":null,"og_custom_url":null,"og_article_section":null,"og_article_tags":null,"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema_type":null,"schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":null,"robots_max_videopreview":null,"robots_max_imagepreview":"large","priority":null,"frequency":null,"location":null,"local_seo":null,"created":"2021-02-07 19:02:25","updated":"2026-09-01 15:05:38","focus_keyword":null,"additional_keywords":null,"truseo_locale":null,"primary_term":null,"og_image_url":null,"og_image_width":null,"og_image_height":null,"twitter_image_url":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"Article","isEnabled":true},"graphs":[]},"limit_modified_date":false,"ai":null,"breadcrumb_settings":null,"seo_analyzer_scan_date":null},"aioseo_breadcrumb":"<div class=\"aioseo-breadcrumbs\"><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/www.taterboy.com\/blog\" title=\"Home\">Home<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/\" title=\"User Experience\">User Experience<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\tCSS Lists, Markers, And Counters\n\t\t<\/span><\/div>","aioseo_breadcrumb_json":[{"label":"Home","link":"https:\/\/www.taterboy.com\/blog"},{"label":"User Experience","link":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/"},{"label":"CSS Lists, Markers, And Counters","link":"https:\/\/www.taterboy.com\/blog\/2019\/07\/css-lists-markers-and-counters\/"}],"jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p8wzr5-hFm","jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/posts\/67912","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/comments?post=67912"}],"version-history":[{"count":0,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/posts\/67912\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/media?parent=67912"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/categories?post=67912"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/tags?post=67912"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}