【问题标题】：Hide element, but show CSS generated content隐藏元素，但显示 CSS 生成的内容
【发布时间】：2011-06-22 05:11:49
【问题描述】：

有没有办法隐藏元素的内容，但保持其: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 并在:before 上设置display: inline，但两者仍处于隐藏状态
使用width: 0; overflow: hidden;，但随后似乎添加了额外的空间（？）
使用color: transparent;，但是当然span的内容还是占空间
使用text-indent: -....px，但是
1. 这是不被搜索引擎和
2. 它似乎不适用于 span 元素 (?)

关于我如何做到这一点的任何其他想法？

【问题讨论】：

标签： html css css-selectors

【解决方案1】：

清洁解决方案

您可以使用visibility: hidden，但使用此解决方案，隐藏内容仍将占用空间。如果这对你来说不重要，你会这样做：

span {
    visibility: hidden;
}

span:before {
    visibility: visible;
}

Hackish 替代解决方案

另一种解决方案是将跨度为零*的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;
}

Example on jsfiddle.

更新（2015 年 5 月 4 日）：使用 CSS3，您现在可以使用 rem（根 EM）单元来保持 :before 元素中的相对字体大小。 (Browser support.)

*此帖子的先前版本建议将字体大小设置为零。但是，这在某些浏览器中无法正常工作，因为 CSS 没有定义预期的行为 when the font-size is set to zero。为了跨浏览器的兼容性，请使用上面提到的小字体。

【讨论】：

嗯..最后一个实际上相当不错..我正在使用它在文本之前添加带有图标字体的图标，因此以像素为单位设置字体大小可能是个好主意..谢谢！
实际上，似乎设置 font-size: 0 是不可能的..？至少在 Chrome 中，您附加的 jsfiddle 仍然显示“Ipsum”，只是非常小的字母..
嗯，在我的 Firefox 中它确实有效。您可以尝试设置一个非常非常低的值，例如0.000000000001em，或者您可以尝试设置0em。
不幸的是，visibility-方法在 IE 中不起作用。 letter-spacing 方法有效，但 letter-spacing 的正确值是 normal，而不是 auto。
一个主要缺点：如果您不知道原始字体大小，则无法使用它，例如因为你所有的尺寸都是相对的。

【解决方案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/

【讨论】：

Bootstrap 将 sr-only 类用于视觉上隐藏但对屏幕阅读器仍然很重要的项目。

【解决方案3】：

以@anroesti 的出色技巧为基础，如果您需要在字体大小和颜色方面未知的上下文中应用，这里有一个解决方案，即您不确定重置为color:black;font-size:1rem; 是否会搞砸：

<span abbrev-content="Intl.">International</span>

@media only screen and (max-width: 700px) {  /* very narrow viewports */
    span[abbrev-content] { font-size: 0.001em; visibility: hidden; }
    span[abbrev-content]::before { 
        content: attr(abbrev-content); 
        font-size: 1000em; 
        visibility: visible; 
    }
}

如果您的跨度内容是一个段落而不仅仅是一个单词，您可能还需要负字母间距。

【讨论】：

【解决方案4】：

我采用了与此处建议的 visibility 类似的方法，但仍然有一个内容框。

我的解决方案是简单地使用font-size 隐藏目标文本。

span {
    font-size: 0;
}

span:before {
    font-size: 16px;
}

【讨论】：

【解决方案5】：

我认为纯 css 和 html 是不可能的。看看这个例子http://jsbin.com/efeco4，你会看到css的content属性里面的东西，被元素包裹了。所以对元素的任何操作都会影响 css content。

因此，另一种想法可能是使用 jquery，用类 hidetext 清空标签 div 内的 html 内容，而不影响 css 的 content。示例代码可能是这样的：

$('.hidetext').empty();

示例：http://jsbin.com/efeco4/2

【讨论】：

我个人建议使用 CSS 而不是 JavaScript，因为某些用户可能会停用。
@andre_roesti 对于 1% 已停用 javascript 的用户来说，我认为是时候更进一步了
我认为根据目标群体，超过 1% 的人禁用了 JavaScript，并且有 good Reasons 这样做。