css - Why does safari hide my paragraph text when using after pseudo-element? -


when working on project wanted underline paragraph, wanted style underlining decided go after pseudo-element. approach proved successful in browser except safari, renders pseudo element doesn't render text inside te p tags.

does know what's happening? can find part of code which's giving me headache in following codepen: https://codepen.io/kobevervoort/pen/kwjagp

html

<ul class="toggle">     <li class="navlink about"><a href="about.php"><p  class="selected">about</p></a></li>     <li class="navlink projects"><a href="projects.php"><p>projects</p> </a></li>     <li class="navlink contact"><a href="contact.php"><p>contact</p> </a></li> </ul> 

css

.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)); } 

put position: absolute; on psuedo element instead of position: relative; might have change positional values little afterwards believe trick.


Comments

Popular posts from this blog

c# - Update a combobox from a presenter (MVP) -

How to understand 2 main() functions after using uftrace to profile the C++ program? -

How to put a lock and transaction on table using spring 4 or above using jdbcTemplate and annotations like @Transactional? -