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;.

In the demo below I use mix-blend-mode: multiple;.

HTML

<figure>
  <img src="https://csspoo.com/images/s.jpg">
</figure>

CSS

figure {
  background-color: #888;
  width: 150px;
  display: flex;
}

img {
  mix-blend-mode: multiply;
  width: 100%;
}

img:hover {
  mix-blend-mode: normal;
}

For this to be short and sweet, grid is used.

HTML

<h2>A headline</h2>

CSS

h2 {
    display: grid;
    width: 100%;
    align-items: center;
    text-align: center;
    grid-template-columns: minmax(1rem, 1fr) auto minmax(1rem, 1fr);
    grid-gap: 1rem;
    color: #333;
}

h2:before,
h2:after {
    content: '';
    height: 2px;
}

h2:before {
  background-image: linear-gradient(to right, #fff 0%, #aaa 100%);
}

h2:after {
  background-image: linear-gradient(to left, #fff 0%, #aaa 100%);
}