htmlcsscolorscss-selectorsstackexchange

What CSS code gives colors to the bullet beside the badge counts on this page?

How is the color of the badge-related bullet symbols in this page coded?

I think this is the relevant part of the HTML:

<div class="-badges">
  <span title="5 gold badges" aria-hidden="true">
    <span class="badge1">●</span>
    <span class="badgecount">5</span>
  </span>
  <span class="v-visible-sr">5 gold badges</span>
  <span title="27 silver badges" aria-hidden="true">
    <span class="badge2">●</span>
    <span class="badgecount">27</span>
  </span>
  <span class="v-visible-sr">27 silver badges</span>
  <span title="58 bronze badges" aria-hidden="true">
    <span class="badge3">●</span>
    <span class="badgecount">58</span>
  </span>
  <span class="v-visible-sr">58 bronze badges</span>
</div>

However, if I open Chrome dev tools and click on the first line with the class badgecount I see these piece of CSS,

.top-bar .my-profile .-badges .badge1+.badgecount {
    color: var(--gold-darker);
}

and a similar code of the other two, which explains the color of the 3 badge counts' numbers, as the .badge1+.badgecount is matching the counts that immediately follow the bullets, and not the bullets themselves.

So what about the bullets? If I click on the line with the badge1 class I don't see any color related style. And indeed, if I go to the "Computed" tab in the devtools, the color property has value rgb(61,61,61).

So where is the bullet getting the color from?

Solution

  • What you're seeing is not the Unicode bullet itself, but part of a sprite sheet. The Unicode bullet itself in the HTML is being hidden with the following rule:

    .top-bar .my-profile .-badges .badge1, .top-bar .my-profile .-badges .badge2, .top-bar .my-profile .-badges .badge3 {
    text-indent: -9999em;
}

    And replaced with the sprite sheet, positioned differently for each badge type to show the right color. The Unicode bullet itself is not colored.