Have you encountered missing bullets in your stylized list, but only on iOS devices? This could be the solution you’re looking for.
Perhaps someday we’ll be able to target list bullets with CSS and customize them however we’d like, but for now we have to resort to less ideal, “hacky” solutions when we want to fancy up our lists. There are many ways to go about this, but some work better than others in different browsers. I ran across the following bug recently and wanted to pass my solution onto you!
The Situation: Styled Bullets in a Columned List
<ul class="styled-list">
<li>Item 1</li>
<li>Item 2 with a very long description</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
</ul>
<style>
ul.styled-list {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
list-style: none;
}
ul.styled-list li {
position: relative;
break-inside: avoid;
padding-left: 1em;
}
ul.styled-list > li::before {
content: "›";
color: #ef4b24;
font-family: sans-serif;
font-weight: 700;
font-size: 0.8em;
position: absolute;
left: 0;
}
</style><ul class="styled-list">
<li>Item 1</li>
<li>Item 2 with a very long description</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
</ul>
<style>
ul.styled-list {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
list-style: none;
}
ul.styled-list li {
position: relative;
break-inside: avoid;
}
ul.styled-list > li::before {
content: "›";
color: #ef4b24;
font-family: sans-serif;
font-weight: 700;
font-size: 0.8em;
position: relative;
float: left;
margin-right: -1em;
left: -1.2em;
}
</style>