<header class="header">
  <div class="header__title">
    <h1>
      <code>attr()</code>
    </h1>
  </div>
  <div class="header__reference">
    <ul class="reference-list">
      <li><a class="reference-list__link" href="https://developer.mozilla.org/en-US/docs/Web/CSS/attr">MDN reference</a></li>
      <li><a class="reference-list__link" href="https://caniuse.com/#feat=mdn-css_types_attr">caniuse Support</a></li>
    </ul>
  </div>
</header>

<main>
  <div class="example">
    <p data-example=" like so.">
      In this example, the value of the <code>data-example</code> attribute applied to this paragraph's <code>p</code> element will be displayed after the paragraph text,
    </p>
    <p>You want to be careful using this technique, as certain kinds of assistive technology and <a rel="external noopener" href="https://css-tricks.com/reader-mode-the-button-to-beat/">browsing modes</a> may not be able to read or display this content.
  </div>

  <aside>
    <p>
      <small>Don't believe me? Check out this Pen's HTML source code.</small>
    </p>
  </aside>
</main>

p::after {
  content: attr(data-example);
  color: var(--color-fern);
  font-weight: 700;
}