title: Why does safari hide my paragraph text when using after pseudo-element?
body: <p>When working on a project I wanted to underline a paragraph, but I wanted to style the underlining so I decided to go for an after pseudo-element. This approach proved successful in most browser except for safari, where it renders the pseudo element but doesn't render the text inside te p tags. </p>
  
  <p>Does anyone know what's happening?
  You can find the part of my code which's giving me a headache in the following codepen: <a href="https://codepen.io/KobeVervoort/pen/KWjaGp" rel="nofollow noreferrer">https://codepen.io/KobeVervoort/pen/KWjaGp</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;ul class="toggle"&gt;
      &lt;li class="navLink about"&gt;&lt;a href="about.php"&gt;&lt;p 
  class="selected"&gt;about&lt;/p&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li class="navLink projects"&gt;&lt;a href="projects.php"&gt;&lt;p&gt;projects&lt;/p&gt;
  &lt;/a&gt;&lt;/li&gt;
      &lt;li class="navLink contact"&gt;&lt;a href="contact.php"&gt;&lt;p&gt;contact&lt;/p&gt;
  &lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.selected
  {
  background: -webkit-linear-gradient(top right, rgb(248, 87, 166), rgb(255, 88, 88));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  }
  
  .selected::after
  {
  content: "";
  display: block;
  position: relative;
  top: 5px;
  height: 3px;
  width: 100%;
  background: -webkit-linear-gradient(top right, rgb(248, 87, 166), rgb(255, 88, 88));
  }
  </code></pre>