Here we have a list. It's not as straight forward as it seems to make the active list item be selected all the way to the left,

The trick is to use a pseudo element that spans all the way out.

Hover the icon below and it will be inverted to white. The trick is to use filter: invert(1);.

HTML

<figure>
  <img src="http://csspoo.com/assets/images/remixicons/link.svg">
</figure>

CSS

figure {
  display: inline-block;
  padding: 1rem;
  background: #eee;
}

figure img {
  filter: invert(1);
  vertical-align: top;
}

figure:hover {
  background: #000;
}

figure:hover img {
  filter: invert(0);
}

The list numbers are automatically generated.

<ol>
  <li>Primary 1
    <ol>
      <li>Sub 1</li>
      <li>Sub 2</li>
    </ol>
  </li>
  <li>Primary 2
    <ol>
      <li>Sub 1</li>
      <li>Sub 2</li>
    </ol>
  </li>
</ol>

ol {
  counter-reset: section;
  list-style-type: none;
  padding: 0;
}

li::before {
  counter-increment: section;
  content: counters(section, ".") " ";
  color: #aaa;
  width: 2rem;
  display: inline-block;
}

The css property box-shadow is not optimal in all situations. For example, when creating a speach bubble, a box shadow will only apply to the box, not the arrow.

To make both the box and the arrow have the same shadow you can use:

filter: drop-shadow(.1rem .1rem .1rem rgba(0,0,0,.5));

The trick is to place a ::before element with a gradient above the bottom text.

To be able to select the text below the overlay you can use pointer-events: none;.