Question

我有这种格式的列表：

<ul>
    <li><a href="link">Part 1</a></li>
    <li><a href="link">Part 2</a></li>
    <li><a href="link">Part 3</a></li>
</ul>

我正在使用css :before来显示内容，而不是a href标记内的文字，我想隐藏文字。我只是想隐藏第1部分，第2部分，第3部分文本并在那里留下一个href标签。

如果我使用display:none;，那么一切都被隐藏了，我怎样才能隐藏href标签内的文字？

Answer 1

通常通过负缩进来完成，这是SEO友好;反对visibility: hidden;或display:none;

display: inline-block;
text-indent: -999px;

但是，由于相同元素需要:before伪，因此上述效果不佳，因此 font-size 可能是您案例的更好解决方案：

＆＃13;

li a{
  font-size: 0;            /* make really small */
}

li a:before{
  content: "CLICK";
  font-size: 1rem;         /* reset to 1 root-em for the pseudo */
}

＆＃13;

<ul>
    <li><a href="link">Part 1</a></li>
    <li><a href="link">Part 2</a></li>
    <li><a href="link">Part 3</a></li>
</ul>

＆＃13;

在font-size旁边，您可以尝试opacity（0），color（透明）等...

Answer 2

您可以使用visibility属性，它会折叠（隐藏）href标记的内容，但保持标记内联。

CSS

ul li a {
    visibility: collapse;
}

HTML

<ul>
    <li><a href="link">Part 1</a></li>
    <li><a href="link">Part 2</a></li>
    <li><a href="link">Part 3</a></li>
</ul>

要在稍后阶段显示内容，请使用

ul li a {
    visibility: visible;
}

Answer 3

我怎样才能隐藏href标签内的文字？

只需将font-size设置为0。

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
    <style>
    a{
      font-size: 0; 
    }
    </style>
  </head>
<body>

<ul>
    <li><a href="link">Part 1</a></li>
    <li><a href="link">Part 2</a></li>
    <li><a href="link">Part 3</a></li>
</ul>

</body>
</html>

Answer 4

这应解决您的问题，只隐藏第1部分，第2部分等。

ul li a {
  visibility: hidden;
}
ul li a:before {
  visibility: visible;
}

另一个声明是必要的，或者你的：在隐藏文本之前。当然，这会使你的锚完好无损。

Answer 5

您可以使文本颜色与背景颜色相同（本例中为白色）。优点是，当您将鼠标移到它上面时，链接空间仍然存在，使其保持可点击状态。

＆＃13;

li a {
  color: #fff;
}

＆＃13;

<ul>
    <li><a href="link">Part 1</a></li>
    <li><a href="link">Part 2</a></li>
    <li><a href="link">Part 3</a></li>
</ul>

＆＃13;

使用CSS或JS隐藏href标记内的文本

5 个答案: