隐藏元素，但显示 CSS 生成的内容

Question

有没有办法隐藏元素的内容，但保持其 :before 内容可见？假设我有以下代码：

HTML:

 <span class="addbefore hidetext">You are here</span>

CSS：

 .addbefore:before {
    content: "Show this";
}
.hidetext {
    // What do I do here to hide the content without hiding the :before content?
}

我试过了：

• 使用 display: none 并在 display: inline :before ，但两者仍然隐藏
• 使用 width: 0; overflow: hidden ;，但随后似乎添加了额外的空间（？）
• using color: transparent;，但是，当然span的内容还是占空间
• 使用 text-indent: -....px ，但是
  1. 这是搜索引擎不赞成的，并且
  2. 它似乎不适用于 span 元素（？）

关于如何执行此操作的任何其他想法？

原文由 Jon Gjengset 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

清洁解决方案

您可以使用 visibility: hidden ，但使用此解决方案，隐藏内容仍会 _占用空间_。如果这对您来说无关紧要，这就是您的做法：

 span {
    visibility: hidden;
}

span:before {
    visibility: visible;
}

---

骇人听闻的替代解决方案

另一种解决方案是设置跨度的 font-size归零\* 一个非常小的值。这种方法的优点：隐藏的内容不会占用任何空间。缺点：您将无法对 :before 内容的字体大小使用 em 或 % 等相对单位。

 span:before {
    content: "Lorem ";
    font-size: 16px;
    font-size: 1rem; /* Maintain relative font-size in browsers that support it */
    letter-spacing: normal;
    color: #000;
}

span {
    font-size: 1px;
    letter-spacing: -1px;
    color: transparent;
}

jsfiddle 上的示例。

更新（2015 年 5 月 4 日）： 使用 CSS3，您现在可以使用 rem （Root EM）单元来维护 :before 元素中的相对字体大小。 （浏览器支持。）

---

*本文的先前版本建议将字体大小设置为零。然而，这在某些浏览器中并不像预期的那样工作，因为 CSS 没有定义 当 font-size 设置为零时 预期的行为。为了跨浏览器的兼容性，使用上面提到的小字体。

原文由 anroesti 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

为了更好的浏览器支持：

将应隐藏的文本包装在一个附加的 span 元素中，并将类应用于该跨度以隐藏您希望隐藏的文本。

HTML:

 <span class="addbefore">
  <span class="visuallyhidden">This text will not show.</span>
</span>

CSS：

 .addbefore:before {
  content: "Show this";
}

.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

上面使用的 .visuallyhidden 类来自当前版本的 HTML5 Boilerplate ： https ://github.com/h5bp/html5-boilerplate/blob/master/css/main.css

该解决方案的优点：

• 语义HTML
• 完整的浏览器支持
• 与其他小 font-size 解决方案一样，小文本没有问题。
• 隐藏内容不会占用空间

在此处查看实际效果：http: //jsfiddle.net/tinystride/A9SSb/

原文由 tinystride 发布，翻译遵循 CC BY-SA 4.0 许可协议