One thing I noticed in the design comp for the LMC website was that bullet items for ordered and unordered lists had been styled using the @lmc-green-3 (#009161) color. Here’s a screenshot from the design comp showing the proposed list layouts.

It’s a nice touch but, surprisingly, it is not something you can do natively using CSS. Setting color on lists is an all or nothing proposition and there’s no way to directly style the color of the list markers differently than the list text.

One widely used work-around is to color the entire list (list markers and text) one color and then wrap the text in a span so it can be colored differently. But, besides introducing unsemantic markup, the extra span is an annoyance to implement and probably impossible to enforce in a CMS environment with multiple content creators.

A more elegant CSS-based solution involves removing the existing list markers and then reinserting new replacement markers. Using this technique, you have full control over all aspects of how the list markers are styled, including coloring, padding, and positioning. The drawback is that the code, although logical, is a bit complex.

For unordered lists, you set “list-style-type” property to “none” to remove the list markers and then use the “:before” pseudo-element to replace the marker using the “content” property. The HTML entity “•” (unicode “\2212”) somewhat non-intuitively turns out to be too small to make a good replacement bullet, but the black circle character (unicode “\25CF”) does just fine. The rest of the code is to position the new list marker where it belongs.

ul li {
  list-style-type: none;
  position: relative;
}
ul li:before {
  content: "\25CF";
  position: absolute;
  left: -1.9em;
  width: 1.5em;
  text-align: center;
  color: @lmc-green-3;
}

You use a similar technique for swapping out the numbered list markers in ordered lists. It’s a little more complicated because you also have to reset the list counters and specify that “li” is the counter increment trigger.

ol {
  counter-reset: li;
}
ol li {
  list-style-type: none;
  counter-increment: li;
  position: relative;
}
ol li:before {
  content: counter(li) ".";
  position: absolute;
  left: -2.6em;
  width: 2em;
  text-align: right;
  font-weight: bold;
  color: @lmc-green-3;
}

In the LMC design comp, list items had their indents adjusted so they were aligned with the paragraph’s left margin. Once set, it cascades nicely so that nested list items have the same amount of indent.

ol, ul { 
  padding: 0 1.5em; 
}

Here’s what ordered and unordered list items look like rendered in a CodePen. Since I am aware that I’ll be coding within the environment of Bootstrap 3, the Pen incorporates the Bootstrap stylesheet to help my example work when I start coding for real.

See the Pen LMC List Item Styling by Tom Keays (@tomkeays) on CodePen
3