Question

我正在尝试隐藏div内容并使用CSS放置图标而不是文本，但我无法隐藏文本，以下是我的代码：

.masthead > div > .mch-search > span {
  text-indent: -1000em;
}
.masthead > div > .mch-search > span:after {
  content: "Icon";
}

<div class="masthead">
  <div class="container">
    <div class="mch-logo"> logo</div>
    <nav>
      <ul>
        <li>nav</li>
        <li>nav</li>
        <li>nav</li>
      </ul>
    </nav>
    <div class="mch-search"> <span>Search</span> </div>
  </div>
</div>

Answer 1

text-index仅适用于块，而span默认为inline。您需要更改span显示的方式。

然后，您需要修改::after元素以使其再次显示。

.masthead > div > .mch-search > span {
  text-indent: -1000em;
  display: block;
}
.masthead > div > .mch-search > span:after {
  content: "Icon";
  display: block;
  text-indent: 0;
}

<div class="masthead">
  <div class="container">
    <div class="mch-logo"> logo</div>
    <nav>
      <ul>
        <li>nav</li>
        <li>nav</li>
        <li>nav</li>
      </ul>
    </nav>
    <div class="mch-search"> <span>Search</span> </div>
  </div>
</div>

也就是说，如果你想以可访问的方式显示一个图标，那么HTML有一个内置的方法，它不依赖于任何CSS黑客攻击。

<img src="icon.png" alt="Search">

Answer 2

您可以尝试调整字体大小，例如......

.masthead > div > .mch-search > span {
 font-size: 0;
}
.masthead > div > .mch-search > span:after {
  content: "Icon";
  font-size: 16px;
}

<div class="masthead">
  <div class="container">
    <div class="mch-logo"> logo</div>
    <nav>
      <ul>
        <li>nav</li>
        <li>nav</li>
        <li>nav</li>
      </ul>
    </nav>
    <div class="mch-search"> <span>Search</span> </div>
  </div>
</div>

使用css隐藏div内容无法正常工作

2 个答案: