{"id":339298,"date":"2021-04-29T07:32:41","date_gmt":"2021-04-29T14:32:41","guid":{"rendered":"https:\/\/css-tricks.com\/?p=339298"},"modified":"2021-04-29T07:32:44","modified_gmt":"2021-04-29T14:32:44","slug":"list-markers-and-string-styles","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/list-markers-and-string-styles\/","title":{"rendered":"List Markers and String Styles"},"content":{"rendered":"\n<p>Lists\u2014we\u2019ve all worked with them in one form or another. I\u2019m talking about HTML\u2019s <code>&lt;ol&gt;<\/code> and <code>&lt;ul&gt;<\/code>. Much of the time, because we desire styling control, we turn off the list\u2019s markers completely with <code>list-style-type: none<\/code>, and start styling from there. Other times, we choose from a very limited set of unordered list markers, such as <code>disc<\/code>, <code>circle<\/code>, or <code>square<\/code>; or a (<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/list-style-type#values\" rel=\"noopener\">much<\/a>) wider range of ordered list markers. We might even, from time to time, supply the URL of an image to be used.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p>But what if we want to style the markers differently than the contents of the list items? That\u2019s always been difficult at best. Now, thanks to the <code>::marker<\/code> pseudo-element, it\u2019s a whole lot easier. You don\u2019t get the full range of CSS to apply to the markers, but there\u2019s still a great deal that can be done.<\/p>\n\n\n\n<p><code>::marker<\/code> is available in Firefox and, thanks to work by Igalia, Chrome as well.<\/p>\n\n\n\n<p>Consider this list:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_YzNMZRz\" src=\"\/\/codepen.io\/anon\/embed\/YzNMZRz?height=250&amp;theme-id=1&amp;slug-hash=YzNMZRz&amp;default-tab=html,result\" height=\"250\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed YzNMZRz\" title=\"CodePen Embed YzNMZRz\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>By default, that will yield an ordered list numbered from 1 to 5, using Arabic numerals (1, 2, 3, etc.), each followed by a dot (period), all of which will match the text contents in font face, size, style, color, and so on.<\/p>\n\n\n\n<p>If you had a design direction that required making the numbers smaller or a different color, you\u2019d have to manually create that effect by suppressing the markers and using the <code>::before<\/code> pseudo-element and <a href=\"https:\/\/css-tricks.com\/custom-list-number-styling\/\">CSS counters<\/a> and negative text indenting and\u2026 well, it would take a scientist to explain it all.<\/p>\n\n\n\n<p>Enter <code>::marker<\/code>. Add these styles to the above list, and you\u2019ll get the result shown after.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_gOgymQr\" src=\"\/\/codepen.io\/anon\/embed\/gOgymQr?height=250&amp;theme-id=1&amp;slug-hash=gOgymQr&amp;default-tab=css,result\" height=\"250\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed gOgymQr\" title=\"CodePen Embed gOgymQr\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>That\u2019s all you need!<\/p>\n\n\n\n<p>Before you go tearing off to rewrite all your CSS, though, beware: the properties you can apply via <code>::marker<\/code> are fairly limited at the moment. As of February 2021, the properties that markers should recognize are:<\/p>\n\n\n\n<ul><li>All font properties (<code>font-face<\/code>, <code>font-size<\/code>, etc.)<\/li><li>The <code>white-space<\/code> property<\/li><li>The <code>color<\/code> property<\/li><li>The internationalization properties <code>text-combine-upright<\/code>, <code>unicode-bidi<\/code>, and <code>direction<\/code><\/li><li>The <code>content<\/code> property<\/li><li>All animation and transition properties<\/li><\/ul>\n\n\n\n<p>There are some additions in some browsers, but almost all of the additions relate to text styling, not the box model. So if you were thinking you could put all your list numbers into circles with shaded backgrounds, <code>::marker<\/code> won\u2019t get you there\u2014you\u2019ll have to return to the hackfest of <code>::before<\/code> generated content. For now, anyway: the specification <a href=\"https:\/\/www.w3.org\/TR\/css-lists-3\/#marker-properties\" rel=\"noopener\">explicitly says<\/a> more properties may be permitted for <code>::marker<\/code> in the future.<\/p>\n\n\n\n<p>There\u2019s also a limitation around <code>white-space<\/code>, which has rendering bugs in varying browsers. Chrome, for example, treats all whitespace in markers as <code>white-space: pre<\/code> as the specification says, but won\u2019t let you change it. This should be fixed when Chrome\u2019s LayoutNG (Next Generation) ships, but not until then. Firefox, on the other hand, ignores any <code>white-space<\/code> values, and treats whitespace like normal-flow text by default.<\/p>\n\n\n\n<p>With those limits in mind, you can still jazz up your markers with the <code>content<\/code> property. Instead of numbers followed by a period, you can put each number in brackets with a combination of counters and strings.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_MWJRpzG\" src=\"\/\/codepen.io\/anon\/embed\/MWJRpzG?height=275&amp;theme-id=1&amp;slug-hash=MWJRpzG&amp;default-tab=css,result\" height=\"275\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed MWJRpzG\" title=\"CodePen Embed MWJRpzG\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Note the space after the closing bracket in the <code>content<\/code> value. That\u2019s included to provide a little bit of space between the marker and the list content. Ordinarily you might think to use a marking or padding, but as we saw earlier, those properties can\u2019t be applied with <code>::marker<\/code>. Which is frustrating!  Also note the CSS counter <code>list-item<\/code>.  That wasn\u2019t defined anywhere else in the CSS\u2014it\u2019s a built-in counter that all browsers (that understand CSS counters) use to count list items, like those in ordered lists. You can use it in your CSS as well!<\/p>\n\n\n\n<p>If all you want to do is change the text content of a list marker and don\u2019t care about changing any of its styles, you can do that with <code>::marker<\/code>, or you can do it with the new cross-browser support for string values on the <code>list-style-type<\/code> property.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">li.warning {\n  list-style-type:\"&#x26a0;\";\n}<\/code><\/pre>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_abpxJQX\" src=\"\/\/codepen.io\/anon\/embed\/abpxJQX?height=250&amp;theme-id=1&amp;slug-hash=abpxJQX&amp;default-tab=css,result\" height=\"250\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed abpxJQX\" title=\"CodePen Embed abpxJQX\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>So that\u2019s what\u2019s new in the world of list markers. It might not be something you need to do often, but if you ever do, it\u2019s good to know that the capabilities in this area have increased, and stand to be even better in the future. Let us know if you come up with some clever markers!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Lists\u2014we\u2019ve all worked with them in one form or another. I\u2019m talking about HTML\u2019s &lt;ol&gt; and &lt;ul&gt;. Much of the time, because we desire styling control, we turn off the list\u2019s markers completely with list-style-type: none, and start styling from there. Other times, we choose from a very limited set of unordered list markers, such [&hellip;]<\/p>\n","protected":false},"author":258657,"featured_media":271168,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_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,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"::marker makes it easier to style list markers, but has some limitations. Here's @meyerweb working within (and around) them.","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[14487,14488,969,919],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/05\/custom-list-style.jpg?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":248040,"url":"https:\/\/css-tricks.com\/style-list-markers-css\/","url_meta":{"origin":339298,"position":0},"title":"Style List Markers in CSS","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 &quot;Article&quot;","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},"classes":[]},{"id":9534,"url":"https:\/\/css-tricks.com\/styling-list-markers\/","url_meta":{"origin":339298,"position":1},"title":"Styling List Markers","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 &quot;Link&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":375273,"url":"https:\/\/css-tricks.com\/newer-things-to-know-about-good-ol-html-lists\/","url_meta":{"origin":339298,"position":2},"title":"Newer Things to Know About Good Ol\u2019 HTML Lists","date":"November 28, 2022","format":false,"excerpt":"HTML lists are boring. They don\u2019t do much, so we don\u2019t really think about them despite how widely used they are. And we\u2019re still able to do the same things we\u2019ve always done to customize them, like removing markers, reversing order, and making custom counters. There are, however, a few\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/html-lists.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":376748,"url":"https:\/\/css-tricks.com\/everything-you-need-to-know-about-the-gap-after-the-list-marker\/","url_meta":{"origin":339298,"position":3},"title":"Everything You Need to Know About the Gap After the List Marker","date":"March 2, 2023","format":false,"excerpt":"I was reading \u201cCreative List Styling\u201d on Google\u2019s web.dev blog and noticed something odd in one of the code examples in the ::marker section of the article. The built-in list markers are bullets, ordinal numbers, and letters. The ::marker pseudo-element allows us to style these markers or replace them with\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"List item with bullet marker. A double-sided arrow occupies the space between the marker and the text.","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/01\/list-marker-gap.png?fit=1200%2C769&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":270643,"url":"https:\/\/css-tricks.com\/css-counters-custom-list-number-styling\/","url_meta":{"origin":339298,"position":4},"title":"Using CSS Counters for Custom List Number Styling","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 &quot;Article&quot;","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},"classes":[]},{"id":307060,"url":"https:\/\/css-tricks.com\/list-style-recipes\/","url_meta":{"origin":339298,"position":5},"title":"List Style Recipes","date":"May 5, 2020","format":false,"excerpt":"Lists are a fundamental part of HTML! They are useful in things like blog posts for listing out steps, recipes for listing ingredients, or items in a navigation menu. Not only are they an opportunity for styling, but they have accessibility implications. For example, the number of items in a\u2026","rel":"","context":"In &quot;Article&quot;","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},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/05\/custom-list-style.jpg?fit=1024%2C512&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/339298"}],"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\/258657"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=339298"}],"version-history":[{"count":7,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/339298\/revisions"}],"predecessor-version":[{"id":339654,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/339298\/revisions\/339654"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/271168"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=339298"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=339298"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=339298"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}