I was reading “Creative List Styling” on Google’s web.dev blog and noticed something odd in one of the code examples in the ::marker section of the article. The built-in list markers are bullets, ordinal numbers, and letters. The ::marker pseudo-element …
Lists—we’ve all worked with them in one form or another. I’m talking about HTML’s <ol> and <ul>. Much of the time, because we desire styling control, we turn off the list’s markers completely with list-style-type: none, and start …
The fact that lists render their markers outside their own box (by default) is slightly weird. Any hidden overflow or overhanging off the edge of the browser will hide them. Moving them inside the box feels better and safer, but …
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;
