css隐藏文本节点，但显示其子节点 [英] css hide text node but show its children

问题描述

我有html和css选择器如下。我想隐藏文本节点，但留下它的孩子。即。文本节点Dashboard

I have html and css selectors as below. I'd like to hide the text node but leave its children. ie. the text node "Dashboard"

<li>
    <a href="#">
        <span class="icon">
          <i class="fa fa-home"></i>
        </span>
        Dashboard  
    </a>
</li>

css

li > a > :not(span){
  display: none;
}

推荐答案

使用 text-indent 隐藏文本，但保持元素可见。这不需要你修改你的HTML。

Here's a CSS-only example using text-indent to hide the text but keep elements inside visible. This doesn't require you to modify your HTML at all.

/* icon styles just for example: */

.icon {
  background: green;
  display: inline-block;
  height: 15px;
  width: 15px;
  border-radius: 50%;
}

/* hiding happens here: */

a {
  display: block;
  position: relative;
  text-indent: -9999px;
}

a > * {
  position: absolute;
  top: 0;
  left: 0;
  text-indent: 0;
}

<ul>
  <li>
    <a href="#">
      <span class="icon"><i class="fa fa-home"></i></span>
      Dashboard
    </a>
  </li>
</ul>

这篇关于css隐藏文本节点，但显示其子节点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！