Html CSS如何在跨距后隐藏文本

下面是我为Joomla开发的模板中的一些代码。下面的代码是生成的输出

是否可以使用css在结束跨距后隐藏标记中的文本？例如，我如何使“打印”、“电子邮件”和“编辑”这些词隐藏起来

<ul class="icons">
  <li class="print-icon">
    <a href="#" onclick="window.print();return false;"><span class="icon-print"></span>Print</a>
  </li>
  <li class="email-icon">
    <a href="#email"><span class="icon-envelope"></span>Email</a>
  </li>
  <li class="edit-icon">
    <a href="#edit"><span class="icon-edit"></span>Edit</a>
  </li>
</ul>

---

感谢您的帮助

因为您实际上无法直接选择文本节点，一种解决方法是将父元素的

字体大小设置为
0
。然后为所需的
span
元素重置
font size
。执行此操作时，应仅显示
span
元素，并有效隐藏相邻的文本节点



.lia图标{
字号：0；
}
.一个跨度{
字体大小：16px；
}








您可以将这些单词从html中删除

<a href="#email"><span class="icon-envelope"></span>Email</a>



变成

<a href="#email"><span class="icon-envelope"></span></a>

您可以尝试将锚定标记设置为“内联块”，并为其提供图标的宽度，然后将“溢出”设置为“隐藏”：

.edit-icon a, .email-icon a, .print-icon a { display: inline-block; width: 16px; overflow: hidden; }

这里有一点
您不能更改输出的html吗？你为什么要用CSS来更改它呢？试试伪元素选择器，例如，
.icon print:：after{content:none；}
。是的，我可以通过在Joomla中编辑一个核心文件来做到这一点，但这不是一个好主意，因为将来的更新会把它们放回去。上面的输出是我必须处理的。我对Joomla不像对其他CMS那样熟悉。在wordpress中，您可以通过创建具有相同文件的子主题来替换主题中的核心文件。这样就不会在更新过程中写得太多。这是Joomla中的一个选项吗？好主意，我会试试：）这是更好的解决方案，因为它针对特定的图标：）好主意，我会试试上面的一个，如果不起作用，我会试试你建议的解决方案：）