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
Post a Comment