javascript - 使用 CSS 或 JS 隐藏 a href 标签内的文本

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 可能是适合您的情况的更好解决方案:

li a{
  font-size: 0;            /* make really small */
}

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

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

除了font-size，你还可以尝试opacity (0), color (transparent)等...