<div class="container">
  <p>
    All the items in the following list are styled giving them a bold font and adding a "New!" word at their end using the <code>::after</code> pseudo-element. Old items are filtered out using the <code>:not()</code> pseudo-class selector and will not get these styles.
  </p>
  <ul>
    <li>First Item</li>
    <li>Second Item</li>
    <li class="old">Third Item (old)</li>
    <li>Fourth Item</li>
    <li class="old">Fifth Item (old)</li>
  </ul>
</div>
body {
  color: #555;
  font-size: 1.25em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

hr {
  margin: 50px 0;
}

.container {
  margin: 40px auto;
  max-width: 700px;
}

li {
  margin-bottom: 1em;
}

li:not(.old) {
  font-weight: bold;
}

li:not(.old):after {
  content: " New!";
  color: deepPink;
}