CSS "Content" Property in Contrast Modes

The CSS content property can be used to add additional content to your webpage using CSS. Often it is used to add a character, symbol, or font icon before or after some content on webpage. For example, it can be used to add vertical bars to separate items on a horizontal navigation list as depicted by the following HTML and CSS snippets.

<nav>
  <ul class="topnav">
    <li>Home</li>
    <li>Browse</li>
    <li>Shop</li>
  </ul>
</nav>
.topnav {
  color: #0000ff;
  list-style: none;
}

.topnav li {
  float: left;
}

.topnav li:after {
  color: #0000ff;
  content: "|";
  padding: 0 2rem;
}

The above example would look like this: A horizontal navigation list with blue text on grey background.

To style this example, a new colour for content should be specified for each contrast. The updated CSS could look like this:

.fl-theme-yb .topnav li:after {
  color: #FFFF00; /* yellow for yellow-on-black */
}
.fl-theme-wb .topnav li:after {
  color: #FFFFFF;  /* white for white-on-black */
}
.fl-theme-by .topnav li:after,
.fl-theme-bw .topnav li:after {
  color: #000000; /* black for black-on-yellow and black-on-white */
}
.fl-theme-lgdg .topnav li:after {
  color: #bdbdbb;  /* light grey for light grey on dark grey */
}

When properly styled, the content value will change according to the contrast theme. Our example would now look like this:

  • A horizontal navigation list with yellow text on black background.
  • A horizontal navigation list with white text on black background.
  • A horizontal navigation list with black text on white background.
  • A horizontal navigation list with black text on yellow background.
  • A horizontal navigation list with light gret text on grey background.