{"id":205997,"date":"2015-08-03T15:03:15","date_gmt":"2015-08-03T22:03:15","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=205997"},"modified":"2021-04-23T08:58:57","modified_gmt":"2021-04-23T15:58:57","slug":"marker","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/selectors\/m\/marker\/","title":{"rendered":"::marker"},"content":{"rendered":"\n<p>The&nbsp;<code>::marker<\/code>&nbsp;pseudo-element is for styling the stylistic marker of a list element. For example, the bullet point of a default <code>&lt;ul&gt;<\/code> (e.g. \u2022) or the numeral of a default <code>&lt;ol&gt;<\/code> (e.g. 1.). This makes it extremely easy to do simple things like colorize them.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_yLVMbEz\" src=\"\/\/codepen.io\/anon\/embed\/yLVMbEz?height=450&amp;theme-id=1&amp;slug-hash=yLVMbEz&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed yLVMbEz\" title=\"CodePen Embed yLVMbEz\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Like <a href=\"https:\/\/css-tricks.com\/almanac\/selectors\/a\/after-and-before\/\">a pseudo-element<\/a>, you&#8217;ll be able to select <code>::marker<\/code> in DevTools to inspect, but it&#8217;s not really &#8220;in the DOM&#8221; like a normal element.  <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1672\" height=\"1162\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/CleanShot-2021-02-15-at-07.00.59@2x.png?resize=1672%2C1162&#038;ssl=1\" alt=\"\" class=\"wp-image-334565\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/CleanShot-2021-02-15-at-07.00.59@2x.png?w=1672&amp;ssl=1 1672w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/CleanShot-2021-02-15-at-07.00.59@2x.png?resize=300%2C208&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/CleanShot-2021-02-15-at-07.00.59@2x.png?resize=1024%2C712&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/CleanShot-2021-02-15-at-07.00.59@2x.png?resize=768%2C534&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/CleanShot-2021-02-15-at-07.00.59@2x.png?resize=1536%2C1067&amp;ssl=1 1536w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/CleanShot-2021-02-15-at-07.00.59@2x.png?resize=1000%2C695&amp;ssl=1 1000w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><figcaption>Chrome DevTools selecting the <code>::marker<\/code> pseudo-element and showing the styles.<\/figcaption><\/figure>\n\n\n\n<p>You can combine <code>::marker<\/code> with the <code>content<\/code> property to change what the marker is. For example, replacing list bullets with emoji (just not yet in Safari):<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_zYoZwyJ\" src=\"\/\/codepen.io\/anon\/embed\/zYoZwyJ?height=450&amp;theme-id=1&amp;slug-hash=zYoZwyJ&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed zYoZwyJ\" title=\"CodePen Embed zYoZwyJ\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>If you change the&nbsp;<code><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/d\/display\/\">display<\/a><\/code>&nbsp;property to <code>list-item<\/code> on any element, you can control its <code>::marker<\/code>. Here <code>&lt;h3&gt;<\/code> elements are numbered, which combines <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/c\/counter-increment\/\">the idea of CSS counters<\/a>: <\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_ExNWmee\" src=\"\/\/codepen.io\/anon\/embed\/ExNWmee?height=450&amp;theme-id=1&amp;slug-hash=ExNWmee&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed ExNWmee\" title=\"CodePen Embed ExNWmee\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>The markers are still list markers, so are subject to things like <code><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/l\/list-style\/#values-for-list-style-position\">list-style-position<\/a><\/code>.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-browser-support\">Browser support<\/h3>\n\n<div class=\"caniuse\"><div class=\"caniuse-header\"><p>This browser support data is from <a href=\"http:\/\/caniuse.com\/#feat=css-marker-pseudo\" rel=\"noopener\">Caniuse<\/a>, which has more detail. A number indicates that browser supports the feature at that version and up.<\/p><\/div><div class=\"caniuse-section\"><h4>Desktop<\/h4><table class=\"browser-support-table\"><thead><tr><th class=\"chrome\"><span>Chrome<\/span><\/th><th class=\"firefox\"><span>Firefox<\/span><\/th><th class=\"ie\"><span>IE<\/span><\/th><th class=\"edge\"><span>Edge<\/span><\/th><th class=\"safari\"><span>Safari<\/span><\/th><\/tr><\/thead><tbody><tr><td class=\"y yep\" title=\"Chrome - \"><span class=\"caniuse-agents-version version\">86<\/span><\/td><td class=\"y yep\" title=\"Firefox - \"><span class=\"caniuse-agents-version version\">68<\/span><\/td><td class=\"n nope\" title=\"IE - \"><span class=\"caniuse-agents-version version\">No<\/span><\/td><td class=\"y yep\" title=\"Edge - \"><span class=\"caniuse-agents-version version\">86<\/span><\/td><td class=\"y yep\" title=\"Safari - \"><span class=\"caniuse-agents-version version\">11.1<\/span><\/td><\/tr><\/table><\/div><div class=\"caniuse-section\"><h4>Mobile \/ Tablet<\/h4><table class=\"browser-support-table\"><thead><tr><th class=\"and_chr\"><span>Android Chrome<\/span><\/th><th class=\"and_ff\"><span>Android Firefox<\/span><\/th><th class=\"android\"><span>Android<\/span><\/th><th class=\"ios_saf\"><span>iOS Safari<\/span><\/th><\/tr><\/thead><tbody><tr><td class=\"y yep\" title=\"Android Chrome - \"><span class=\"caniuse-agents-version version\">124<\/span><\/td><td class=\"y yep\" title=\"Android Firefox - \"><span class=\"caniuse-agents-version version\">125<\/span><\/td><td class=\"y yep\" title=\"Android - \"><span class=\"caniuse-agents-version version\">124<\/span><\/td><td class=\"y yep\" title=\"iOS Safari - \"><span class=\"caniuse-agents-version version\">11.3-11.4<\/span><\/td><\/tr><\/table><\/div><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-more-information\">More information<\/h3>\n\n\n    \t\t\n    <div class=\"in-article-cards\">\n      <article class=\"in-article-card article\" id=\"mini-post-205997\">\n\n  <time datetime=\"2020-05-05\" title=\"Originally published Aug 3, 2015\">\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  \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:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 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 article\" id=\"mini-post-205997\">\n\n  <time datetime=\"2016-11-21\" title=\"Originally published Aug 3, 2015\">\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  \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:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 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 article\" id=\"mini-post-205997\">\n\n  <time datetime=\"2018-05-18\" title=\"Originally published Aug 3, 2015\">\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  \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:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 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 \" id=\"mini-post-205997\">\n\n  <time datetime=\"2021-01-15\" title=\"Originally published Aug 3, 2015\">\n    <strong>\n                \n      Video\n      <\/strong>\n\n    on\n\n    Jan 15, 2021  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/video-screencasts\/202-centered-list-markers\/\">\n      #202: Centered List Markers    <\/a>\n  <\/h3>\n\n      <time>\u25b6 Running Time: <span>10:13<\/span><\/time>\n  \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:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 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    <\/div>\n  \n\n\n<h3 class=\"wp-block-heading\" id=\"h-related\">Related<\/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=\"2011-09-06\" title=\"Originally published Aug 3, 2015\">\n    <strong>\n                \n      Almanac\n      <\/strong>\n\n    on\n\n    Sep 30, 2022  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/almanac\/selectors\/a\/after-and-before\/\">\n      ::before \/ ::after    <\/a>\n  <\/h3>\n\n      <a href=\"https:\/\/css-tricks.com\/almanac\/selectors\/a\/after-and-before\/\" class=\"almanac-example\">\n      <code class=\"language-css\">.element::before { content: \"Yo!\"; }<\/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:\/\/secure.gravatar.com\/avatar\/84da92f298e5b124d92fb581b82cfdf4?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/84da92f298e5b124d92fb581b82cfdf4?s=160&#038;d=retro&#038;r=pg 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-205997\">\n\n  <time datetime=\"2011-09-05\" title=\"Originally published Aug 3, 2015\">\n    <strong>\n                \n      Almanac\n      <\/strong>\n\n    on\n\n    Jan 31, 2019  <\/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 {\r\n  counter-increment: my-awesome-counter;\r\n}<\/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:\/\/secure.gravatar.com\/avatar\/84da92f298e5b124d92fb581b82cfdf4?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/84da92f298e5b124d92fb581b82cfdf4?s=160&#038;d=retro&#038;r=pg 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-205997\">\n\n  <time datetime=\"2011-09-05\" title=\"Originally published Aug 3, 2015\">\n    <strong>\n                \n      Almanac\n      <\/strong>\n\n    on\n\n    Sep 28, 2022  <\/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:\/\/secure.gravatar.com\/avatar\/84da92f298e5b124d92fb581b82cfdf4?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/84da92f298e5b124d92fb581b82cfdf4?s=160&#038;d=retro&#038;r=pg 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-205997\">\n\n  <time datetime=\"2020-09-17\" title=\"Originally published Aug 3, 2015\">\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:\/\/secure.gravatar.com\/avatar\/1a1b5ca4b139c0c8caaea26ef437d943?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/1a1b5ca4b139c0c8caaea26ef437d943?s=160&#038;d=retro&#038;r=pg 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-205997\">\n\n  <time datetime=\"2011-09-05\" title=\"Originally published Aug 3, 2015\">\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  \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:\/\/secure.gravatar.com\/avatar\/84da92f298e5b124d92fb581b82cfdf4?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/84da92f298e5b124d92fb581b82cfdf4?s=160&#038;d=retro&#038;r=pg 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","protected":false},"excerpt":{"rendered":"<p>The&nbsp;::marker&nbsp;pseudo-element is for styling the stylistic marker of a list element. For example, the bullet point of a default &lt;ul&gt; (e.g. \u2022) or the numeral of a default &lt;ol&gt; (e.g. 1.). This makes it extremely easy to do simple things like colorize them. Like a pseudo-element, you&#8217;ll be able to select ::marker in DevTools to [&hellip;]<\/p>\n","protected":false},"author":2508,"featured_media":0,"parent":14226,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"page-almanac-single.php","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":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":243593,"url":"https:\/\/css-tricks.com\/almanac\/properties\/o\/offset-distance\/","url_meta":{"origin":205997,"position":0},"title":"offset-distance","date":"July 22, 2016","format":false,"excerpt":"This property began life as motion-offset. This, and all other related motion-* properties, are being renamed offset-* in the spec. We're changing the names here in the almanac. If you want to use it right now, probably best to use both syntaxes. The motion-offset property in CSS says: how far\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14067,"url":"https:\/\/css-tricks.com\/almanac\/properties\/l\/list-style\/","url_meta":{"origin":205997,"position":1},"title":"list-style","date":"September 5, 2011","format":false,"excerpt":"The list-style property is a shorthand property that sets values for three different list-related properties in one declaration: ul { list-style: <list-style-type> || <list-style-position> || <list-style-image>; } Here's an example of the syntax: ul { list-style: square outside none; } Which would be the same as the following longhand version:\u2026","rel":"","context":"In \"list-style\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":332764,"url":"https:\/\/css-tricks.com\/video-screencasts\/202-centered-list-markers\/","url_meta":{"origin":205997,"position":2},"title":"#202: Centered List Markers","date":"January 15, 2021","format":false,"excerpt":"Like so many things CSS, there is all sorts of little stuff to know, even something as minuscule as centering a list marker. A reader wrote in with a screenshot of what they were trying to accomplish \u2014 basically an ordered list (<ol>) with the list markers (1., 2., 3.,\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/01\/centered-list-markers.png?fit=1200%2C675&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":14132,"url":"https:\/\/css-tricks.com\/almanac\/properties\/v\/vertical-align\/","url_meta":{"origin":205997,"position":3},"title":"vertical-align","date":"September 6, 2011","format":false,"excerpt":"The vertical-align property in CSS controls how elements set next to each other on a line are lined up. img { vertical-align: middle; } In order for this to work, the elements need to be set along a baseline. As in, inline (e.g. , ) or inline-block (e.g. as set\u2026","rel":"","context":"In \"vertical-align\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14158,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/a\/after-and-before\/","url_meta":{"origin":205997,"position":4},"title":"::before \/ ::after","date":"September 6, 2011","format":false,"excerpt":"The ::before and ::after pseudo-elements in CSS allows you to insert content onto a page without it needing to be in the HTML. While the end result is not actually in the DOM, it appears on the page as if it is, and would essentially be like this: div::before {\u2026","rel":"","context":"In \"psuedo elements\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":346470,"url":"https:\/\/css-tricks.com\/almanac\/properties\/o\/outline-width\/","url_meta":{"origin":205997,"position":5},"title":"outline-width","date":"August 10, 2021","format":false,"excerpt":"The outline-width CSS property specifies the thickness of an element's outline. What\u2019s an outline? An outline is a line that is drawn around elements \u2014 outside the border edge \u2014 that is used for accessibility or decoration purposes when that element is in focus. button:focus { outline-width: 5px; } We\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/205997"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"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=205997"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/205997\/revisions"}],"predecessor-version":[{"id":339271,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/205997\/revisions\/339271"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14226"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=205997"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=205997"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}