Today I Learned - Rocky Kev

TIL about the bullet ::marker

POSTED ON:

TAGS: css

When you have a list element, you had to hack the css to change bullet items.

DEFAULT:

You did that by hiding the bullet, then using a ::before class with content to replace the bullet with something else.

Now, there's a CSS psuedo element called ::marker, which makes it a lot easier to modify bullets!

ol li::marker {
  content: "🧡 ";
}

REF:
https://web.dev/css-marker-pseudo-element/
https://css-tricks.com/almanac/selectors/m/marker/

Related TILs

Tagged: css

TIL the alternate keyword

If 'alternate' appears along with the stylesheet keyword, the linked file is an alternative stylesheet. It won’t be applied to the document, but it will be ready for when we need it.

TIL Logical Properties

For that sweet sweet Internationalization you want to avoid directional words like 'left', 'right', 'top', and 'bottom'.

TIL Using pseudo-classes in your querySelector!

let notTuna = document.querySelectorAll('.sandwich:not(.tuna)')