爲什麼safari在使用僞元素後隱藏我的段落文本？

當我在一個項目上工作時，我想強調一個段落，但我想要設計下劃線的樣式，所以我決定去找一個僞元素。這種方法在大多數瀏覽器中都證明是成功的，除了safari，它在渲染僞元素但不在te標籤內呈現文本。爲什麼safari在使用僞元素後隱藏我的段落文本？

有誰知道發生了什麼事？你可以找到我的代碼，竟然放棄了我在下面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)); 
}

來源

2017-04-07 Kobe Vervoort

將position: absolute;的僞元素上，而不是position: relative;魔法門不得不在稍後改變位置值，但我相信這是有用的。

來源

2017-04-07 17:15:00 StefanBob

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

<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>

來源

2017-04-07 17:15:29 Syden

爲什麼safari在使用僞元素後隱藏我的段落文本？

回答

相關問題