隐藏元素，但显示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;，但随后似乎增加了额外的空间（？）
• 使用颜色：透明；但是，当然，跨度的内容仍会占用空间
• 使用text-indent: -....px，但是
  1. 这被搜索引擎和
  2. 似乎不适用于span元素（？）

关于如何执行此操作还有其他想法吗？

Answer 1

您可以使用visibility: hidden，但是使用此解决方案，隐藏的内容仍然 会占用空间 。如果这对您而言无关紧要，请按照以下步骤进行：

span {
    visibility: hidden;
}

span:before {
    visibility: visible;
}

骇人的替代解决方案

另一种解决方案是设置font-size跨度 归零
*的价值很小。这种方法的优点：隐藏的内容不会占用任何空间。缺点：您将无法使用诸如em或％之类的相对单位作为:before内容的字体大小。

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设置为0时的预期行为。为了实现跨浏览器的兼容性，请使用上述较小的字体。