为什么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在使用伪元素后隐藏我的段落文本？

回答

相关问题