CSS - Generated content | Ambient.Impact

Unicode characters in CSS generated content

I ran across an issue today where I had set some generated content to an unusual character (an open quotation mark), but the compiled and minified CSS served by Drupal was showing me the wrong characters. It was likely caused by character encoding getting screwed up somewhere along the line. The solution was to specify the Unicode character I wanted in the format seen in the code block below, as demonstrated in the source link below and this Stack Overflow answer.

Code language: CSS

p:before {
  content: "\201C";
}

Source link

Glyphs | CSS-Tricks

Style List Markers in CSS

It’s a perfectly reasonable to want to style the marker of list items. You know: blue bullets with black text in an unordered list. Or red counters with knockout white numbers in an ordered list.

There is a working draft spec that defines a ::marker pseudo-element that would give us this control.

Code language: CSS

/* Not supported anywhere; subject to change */
li::marker {
  color: blue;
}

It’s possible to do this styling now, though, thanks to CSS counters. The trick is to remove the list-style, then apply the markers through pseudo-element counters.

Code language: CSS

ol {
  list-style: none;
  counter-reset: my-awesome-counter;
}
li {
  counter-increment: my-awesome-counter;
}
li::before {
  content: counter(my-awesome-counter);
 
  /* Style away! */
 
}

Source link

Style List Markers in CSS | CSS-Tricks