Ordered Lists with Unicode Symbols<\/a><\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"How about a classic CSS trick! Getting custom styling on lists isn’t even so tricky anymore, since CSS counters have […]<\/p>\n","protected":false},"author":3,"featured_media":271168,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","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":"Custom list styling is one of those awesome things we can do but is easy to forget. Here's a collection of solid examples.","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},"_share_on_mastodon":"0","_share_on_mastodon_status":"%title% %permalink%"},"categories":[4],"tags":[1378,969,919],"class_list":["post-270643","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-articles","tag-counters","tag-lists","tag-marker"],"acf":{"show_toc":"No"},"share_on_mastodon":{"url":"","error":""},"jetpack_publicize_connections":[],"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":312104,"url":"https:\/\/css-tricks.com\/how-to-reverse-css-custom-counters\/","url_meta":{"origin":270643,"position":0},"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":384529,"url":"https:\/\/css-tricks.com\/styling-counters-in-css\/","url_meta":{"origin":270643,"position":1},"title":"Styling Counters in CSS","author":"Juan Diego Rodr\u00edguez","date":"March 17, 2025","format":false,"excerpt":"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.","rel":"","context":"In "Guides"","block_context":{"text":"Guides","link":"https:\/\/css-tricks.com\/category\/guides\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2025\/03\/guide-styling-counters-2.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\/guide-styling-counters-2.jpg?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2025\/03\/guide-styling-counters-2.jpg?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2025\/03\/guide-styling-counters-2.jpg?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2025\/03\/guide-styling-counters-2.jpg?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":248040,"url":"https:\/\/css-tricks.com\/style-list-markers-css\/","url_meta":{"origin":270643,"position":2},"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":270643,"position":3},"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":266050,"url":"https:\/\/css-tricks.com\/counting-css-counters-css-grid\/","url_meta":{"origin":270643,"position":4},"title":"Counting With CSS Counters and CSS Grid","author":"Preethi","date":"February 6, 2018","format":false,"excerpt":"In this post, we're going to demonstrate how we can use the source order independence of CSS Grid to solve a layout issue that's the result of a source order constraint. Specifically, we're going to look at checkboxes and CSS Counters\u2014two concepts that rely on source order when used together.","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\/01\/counter-grid.jpg?fit=1048%2C434&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/01\/counter-grid.jpg?fit=1048%2C434&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/01\/counter-grid.jpg?fit=1048%2C434&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/01\/counter-grid.jpg?fit=1048%2C434&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":307060,"url":"https:\/\/css-tricks.com\/list-style-recipes\/","url_meta":{"origin":270643,"position":5},"title":"List Style Recipes","author":"Chris Coyier","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 "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":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/270643","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\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=270643"}],"version-history":[{"count":7,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/270643\/revisions"}],"predecessor-version":[{"id":362615,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/270643\/revisions\/362615"}],"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=270643"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=270643"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=270643"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}