{"id":376748,"date":"2023-03-02T10:20:03","date_gmt":"2023-03-02T18:20:03","guid":{"rendered":"https:\/\/css-tricks.com\/?p=376748"},"modified":"2023-03-02T10:20:12","modified_gmt":"2023-03-02T18:20:12","slug":"everything-you-need-to-know-about-the-gap-after-the-list-marker","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/everything-you-need-to-know-about-the-gap-after-the-list-marker\/","title":{"rendered":"Everything You Need to Know About the Gap After the List Marker"},"content":{"rendered":"\n

I was reading \u201cCreative List Styling\u201d<\/a> on Google\u2019s web.dev blog and noticed something odd in one of the code examples in the ::marker<\/code> section of the article. The built-in list markers are bullets, ordinal numbers, and letters. The ::marker<\/code> pseudo-element allows us to style these markers or replace them with a custom character or image.<\/p>\n\n\n\n

::marker {\n  content: url('\/marker.svg') ' ';\n}<\/code><\/pre>\n\n\n\n
The example that caught my attention uses an SVG icon as a custom marker for the list items. But there\u2019s also a single space character (\" \"<\/code>) in the CSS value next to the url()<\/code> function. The purpose of this space seems to be to insert a gap after the custom marker.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
When I saw this code, I immediately wondered if there was a better way to create the gap. Appending a space to content<\/code> feels more like a workaround than the optimal solution. CSS provides margin<\/code> and padding<\/code> and other standard ways to space out elements on the page. Could none of these properties be used in this situation?<\/p>\n\n\n\n\n\n\n\n
First, I tried to substitute the space character with a proper margin:<\/p>\n\n\n\n
::marker {\n  content: url('\/marker.svg');\n  margin-right: 1ch;\n}<\/code><\/pre>\n\n\n\n
This didn\u2019t work. As it turns out, ::marker<\/code> only supports a small set of mostly text-related CSS properties<\/a>. For example, you can change the font-size<\/code> and color<\/code> of the marker, and define a custom marker by setting content<\/code> to a string or URL, as shown above. But the margin<\/code> and padding<\/code> properties are not supported<\/a>, so setting them has no effect. What a disappointment.<\/strong><\/p>\n\n\n\n
Could it really be that a space character is the only way to insert a gap after a custom marker? I needed to find out. As I researched this topic, I made a few interesting discoveries that I\u2019d like to share in this article.<\/p>\n\n\n
Adding padding and margins<\/h3>\n\n\n
First, let\u2019s confirm what margin<\/code> and padding<\/code> do on the <ul><\/code> and <li><\/code> elements. I\u2019ve created a test page for this purpose. Drag the relevant sliders and observe the effect on the spacing on each side of the list marker. Tip: Use the Reset button liberally to reset all controls to their initial values.<\/p>\n\n\n\n