title: Why do Chrome and Edge show text-shadow over hyperlink underline?
body: <p>I've noticed something odd about the way Chrome and Edge render text-shadows on hyperlinks.</p>
  <p>For example, I have a situation where I apply two text-shadows to several paragraph elements. One of these paragraphs is only a standard hyperlink with <code>text-decoration: underline;</code>. Here's the HTML and CSS:</p>
  <pre><code>&lt;p class=&quot;header__text&quot;&gt;
      &lt;a href=&quot;https://google.com&quot;&gt;See the 2021 edition ...&lt;/a&gt;
  &lt;/p&gt;
  </code></pre>
  <pre class="lang-css prettyprint-override"><code>.header__text {
      color: #fff;
      text-shadow: 2px 2px 2px #000, 1px 1px 24px #000;
      padding-left: 16px;
      padding-right: 16px;
  }
  a {
      color: #c62828;
  }
  </code></pre>
  <p>This renders the way I would expect in Safari and Firefox (Mac and PC), with the shadow completely underneath the text and the underline.</p>
  <p>But in Chrome (Mac and PC) and Edge, the text-shadow falls under the text, but <em><strong>over</strong></em> the hyperlink's underline.</p>
  <p><a href="https://i.stack.imgur.com/KGJKv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KGJKv.png" alt="Comparison" /></a></p>
  <p>I don't understand why the shadow behaves like this in those two browsers. Is this just a bug? Is there some Blink-specific property I should override to stop this behavior?</p>