<div class="container">
  <section class="default">

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dignissim nec nulla gravida lacinia. Donec <a href="https://codepen.io/kachibito/pen/jgyEYL">pharetra</a> mi vitae arcu tempus, vitae semper mi iaculis. Class aptent taciti sociosqu ad <a href="http://kachibito.net/">kachibito.net</a> torquent per conubia nostra, per <a href="https://www.google.com/?hl=ja">google.com</a> himenaeos. Sed id aliquam tellus. Quisque convallis in enim eu bibendum. Nullam quis sapien <a href="https://codepen.io/kachibito/pen/jgyEYL">interdum erat vestibulum bibendum finibus</a> ac quam. Mauris vestibulum urna metus, nec luctus massa volutpat non. Maecenas nibh purus, laoreet in risus vitae, scelerisque congue mauris. Pellentesque vulputate lobortis euismod.</p>
  </section>
</div>
.container {
  max-width: 28em;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.4;
  font-family: sans-serif;
}

.default {
  --icon-width: 0.8em;
}
 a:not([href^="https://codepen.io/"]):after{
  content: "";
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImJsdWUiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0iZmVhdGhlciBmZWF0aGVyLWV4dGVybmFsLWxpbmsiPjxwYXRoIGQ9Ik0xOCAxM3Y2YTIgMiAwIDAgMS0yIDJINWEyIDIgMCAwIDEtMi0yVjhhMiAyIDAgMCAxIDItMmg2Ij48L3BhdGg+PHBvbHlsaW5lIHBvaW50cz0iMTUgMyAyMSAzIDIxIDkiPjwvcG9seWxpbmU+PGxpbmUgeDE9IjEwIiB5MT0iMTQiIHgyPSIyMSIgeTI9IjMiPjwvbGluZT48L3N2Zz4=);
  display: inline-block;
  vertical-align: middle;
  width: var(--icon-width);
  height: var(--icon-width);
  margin-top: -0.2em;
  margin-left: 0.2em;
  background-size: cover;
}
/* 
a[href^="/"]:after{
  content:none;
} */

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.