{"id":350670,"date":"2021-08-30T14:20:00","date_gmt":"2021-08-30T21:20:00","guid":{"rendered":"https:\/\/css-tricks.com\/?p=350670"},"modified":"2021-09-27T16:29:16","modified_gmt":"2021-09-27T23:29:16","slug":"css-pseudo-commas","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/css-pseudo-commas\/","title":{"rendered":"CSS Pseudo Commas"},"content":{"rendered":"\n<p>A bonafide CSS trick if there ever was one! @ShadowShahriar <a href=\"https:\/\/codepen.io\/ShadowShahriar\/pen\/LYyvVjo\" rel=\"noopener\">created a CodePen demo<\/a> that uses pseudo-elements to place commas between list items that are displayed inline, and the result is a natural-looking complete sentence with proper punctuation.<\/p>\n\n\n\n<!--more-->\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_LYyvVjo\" src=\"\/\/codepen.io\/anon\/embed\/LYyvVjo?height=1100&amp;theme-id=1&amp;slug-hash=LYyvVjo&amp;default-tab=result\" height=\"1100\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed LYyvVjo\" title=\"CodePen Embed LYyvVjo\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-how-it-works\">How it works<\/h3>\n\n\n<p>The trick? First, it&#8217;s to make an unordered list an inline element with no markers or spacing:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">ul {\n  padding: 0;\n  margin: 0;\n  display: inline;\n  list-style-type: none;\n}<\/code><\/pre>\n\n\n\n<p>Next, we display list items inline so they flow naturally as text in a sentence:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">li {\n  display: inline;\n}<\/code><\/pre>\n\n\n\n<p>Then we add commas between list items by selecting their <code>::after<\/code> pseudo-element, and setting it&#8217;s <code>content<\/code> property with a comma (<code>,<\/code>) value.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">li::after{\n  content: var(--separator);\n}<\/code><\/pre>\n\n\n\n<p>Oh, but wait! What about the ol&#8217; <a href=\"https:\/\/www.grammarly.com\/blog\/what-is-the-oxford-comma-and-why-do-people-care-so-much-about-it\/\" rel=\"nofollow noopener\">Oxford comma<\/a>? Use <code><a href=\"https:\/\/css-tricks.com\/almanac\/selectors\/n\/nth-last-of-type\/\">:nth-last-of-type()<\/a><\/code> to select the second-to-last list item, and set its <code>::after<\/code> pseudo-element&#8217;s <code>content<\/code> property to <code>\", and\"<\/code> before the last list item.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">li:nth-last-of-type(2)::after{\n  content: \", and \";\n}<\/code><\/pre>\n\n\n\n<p>We&#8217;re not done. @ShadowShahriar considers an edge case where there are only two items. All we need is to display an &#8220;and&#8221; between those two items, so:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">li:first-of-type:nth-last-of-type(2)::after {\n  content: \" and \";\n}<\/code><\/pre>\n\n\n\n<p>I had to look that up on <a href=\"https:\/\/kittygiraudel.github.io\/selectors-explained\/\" rel=\"noopener\">Selectors Explained<\/a> to make sure I was reading it correctly. <a href=\"https:\/\/kittygiraudel.github.io\/selectors-explained\/?s=li%253Afirst-of-type%253Anth-last-of-type%282%29%253A%253Aafter\\\" rel=\"noopener\">That&#8217;s saying<\/a>:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-style-default is-layout-flow wp-block-quote-is-layout-flow\"><p>The <code>after<\/code> pseudo-element<\/p><p>\u2026 of a <code>&lt;li&gt;<\/code> element provided it is the first of its type in its parent and the <a href=\"https:\/\/css-tricks.com\/examples\/nth-child-tester\/\" rel=\"noreferrer noopener\" target=\"_blank\">nth of its type<\/a> from the end (formula) in its parent.<\/p><\/blockquote>\n\n\n\n<p>What a mouthful! The final touch is a period at the end of the list:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">li:last-of-type::after {\n  content: \".\";\n}<\/code><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-using-custom-properties\">Using custom properties<\/h3>\n\n\n<p>We just looked at an abridged version of the actual code. @ShadowShahriar does a nice thing by setting a comma and the &#8220;and&#8221; as custom properties:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"2,3\"><code markup=\"tt\">ul {\n  --separator: \",\";\n  --connector: \"and\";\n\n  padding: 0;\n  margin: 0;\n  display: inline;\n  list-style-type: none;\n}<\/code><\/pre>\n\n\n\n<p>That way, when we can swap those out for other ways to separate list items later. Nice touch.<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p>This caught my eye not only for its clever use of pseudo-element trickery, but also for its simplicity. It&#8217;s using tried and true CSS principles in a way that supports semantic HTML \u2014 no extra classes, elements, or even JavaScript to help manipulate things. It almost makes me wonder if HTML could use some sort of inline list element (<code>&lt;il&gt;<\/code> anyone???) to help support sentences convey list items without breaking out of a paragraph.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A bonafide CSS trick if there ever was one! @ShadowShahriar created a CodePen demo that uses pseudo-elements to place commas between list items that are displayed inline, and the result is a natural-looking complete sentence with proper punctuation.<\/p>\n","protected":false},"author":2508,"featured_media":350678,"comment_status":"closed","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":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[17],"tags":[2019,969,867,1154],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/inline-list.jpg?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":332295,"url":"https:\/\/css-tricks.com\/how-to-add-commas-between-a-list-of-items-dynamically-with-css\/","url_meta":{"origin":350670,"position":0},"title":"How to Add Commas Between a List of Items Dynamically with CSS","date":"January 12, 2021","format":false,"excerpt":"Imagine you have a list of items. Say, fruit: Banana, Apple, Orange, Pear, Nectarine We could put those commas (,) in the HTML, but let\u2019s look at how we could do that in CSS instead, giving us an extra level of control. We\u2019ll make sure that last item doesn\u2019t have\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/01\/commas.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":266396,"url":"https:\/\/css-tricks.com\/css-basics-using-multiple-backgrounds\/","url_meta":{"origin":350670,"position":1},"title":"CSS Basics: Using Multiple Backgrounds","date":"February 14, 2018","format":false,"excerpt":"With CSS, you can control the background of elements. You can set a background-color to fill it with a solid color, a background-image to fill it with (you guessed it) an image, or even both: body { background-color: red; background-image: url(pattern.png); } Here's an example where I'm using an SVG\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/02\/multiple-bg-images.jpg?fit=607%2C272&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":317525,"url":"https:\/\/css-tricks.com\/bold-on-hover-without-the-layout-shift\/","url_meta":{"origin":350670,"position":2},"title":"Bold on Hover&#8230; Without the Layout Shift","date":"July 27, 2020","format":false,"excerpt":"When you change the font-weight of a font, the text will typically cause a bit of a layout shift. That's because bold text is often larger and takes up more space. Sometimes that doesn't matter, like a vertical stack of links where the wider\/bolder text doesn't push anything anyway. Sometimes\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/07\/bold-no-shifty-shift.gif?fit=600%2C300&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":308234,"url":"https:\/\/css-tricks.com\/pseudo-elements-in-the-web-animations-api\/","url_meta":{"origin":350670,"position":3},"title":"Pseudo-elements in the Web Animations API","date":"May 13, 2020","format":false,"excerpt":"To use the Web Animations API (e.g. el.animate()) you need a reference to a DOM element to target. So, how do you use it on pseudo-elements, which don't really offer a direct reference? Dan Wilson covers a (newish?) part of the API itself: const logo = document.getElementById('logo'); logo.animate({ opacity: [0,\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":7741,"url":"https:\/\/css-tricks.com\/commas-before\/","url_meta":{"origin":350670,"position":4},"title":"Commas Before","date":"October 26, 2010","format":false,"excerpt":"Marc Grabanski brought up and interesting idea on Twitter yesterday. Commas before or after the line on json objects and multi var definitions? Here are examples of object literals: \/\/ commas before var vampyre = { teeth: 'sharp' , blood: 'stale' , age: 320 } \/\/ commas after var vampyre\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":307060,"url":"https:\/\/css-tricks.com\/list-style-recipes\/","url_meta":{"origin":350670,"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":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/350670"}],"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\/2508"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=350670"}],"version-history":[{"count":8,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/350670\/revisions"}],"predecessor-version":[{"id":352768,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/350670\/revisions\/352768"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/350678"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=350670"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=350670"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=350670"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}