Question

在处理项目时，我想强调一个段落，但我想设置下划线的样式，所以我决定选择一个after伪元素。这种方法在大多数浏览器中证明是成功的，除了safari之外，它渲染伪元素但不会在te标签内呈现文本。

有谁知道发生了什么？您可以在以下代码集中找到我的代码中让我头疼的部分：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));
}

Answer 1

将position: absolute;放在psuedo元素而不是position: relative;之后可能需要稍微更改位置值，但我相信这样做。

Answer 2

您的.selected CSS属性使文字透明：

＆＃13;

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

＆＃13;

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

＆＃13;

为什么safari在使用after伪元素后会隐藏我的段落文本？

2 个答案: