gpt4 book ai didi

html - CSS如何在跨度后隐藏文本

转载 作者:行者123 更新时间:2023-11-28 17:11:00 24 4
gpt4 key购买 nike

以下是我为 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>

谢谢你的帮助

最佳答案

由于您实际上无法直接选择文本节点,因此一种解决方法是将父元素的font-size 设置为0。然后为那些需要的 span 元素重置 font-size。这样做时,只有 span 元素应该出现,相邻的文本节点应该有效地被隐藏。

Example Here

.icons li a {
font-size: 0;
}
.icons li a span {
font-size: 16px;
}
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<ul class="icons">
<li class="print-icon">
<a href="#" onclick="window.print();return false;"><span class="fa fa-print"></span>Print</a>
</li>
<li class="email-icon">
<a href="#email"><span class="fa fa-envelope"></span>Email</a>
</li>
<li class="edit-icon">
<a href="#edit"><span class="fa fa-edit"></span>Edit</a>
</li>
</ul>

关于html - CSS如何在跨度后隐藏文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29222979/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com