<figure>
  <figcaption>Inheriting light coloured links inside a light coloured box is a terrible idea</figcaption>
  <div class="bg-black u-padd demo">
    <p>I have a black background. <a href="#" class="fresh">Fresh link</a> <a href="#" class="visited">Visited link</a></p>
    <p class="bg-pink u-padd">I have a pink background. <a href="#" class="fresh">Fresh link</a> <a href="#" class="visited">Visited link</a></p>
  </div>
</figure>
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
a {
  text-decoration: none;
}
a.fresh {
  border-bottom: solid .1em #00e;
  color: #00e;
}
a.visited {
  border-bottom: solid .1em #551a8b;
  color: #551a8b;
}
body .bg-black {
  background: #000;
  color: #fff;
}
body .bg-pink {
  background: fuchsia;
  color: black;
}
/* For demo purposes only! */
.demo .visited {
  border-color: #fcf;
  color: #fcf;
}
.demo .fresh {
  border-color: #99f;
  color: #99f;
}
.u-padd {padding: 1em;}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.