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

有没有隐藏元素的内容的方法，但保持:before内容可见: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和setting display: inline on :before ，但是两者仍然隐藏
• 使用width: 0; overflow: hidden width: 0; overflow: hidden ;，但是然后额外的空间似乎被添加（？）
• 使用颜色：透明，但当然，跨度的内容仍占用空间
• 使用text-indent: -....px ，但是
  1. 这是由search引擎皱起了眉头
  2. 它似乎不适用于跨度元素（？）

任何其他的想法，我怎么可能做到这一点？

Answer 1

清洁解决scheme

您可以使用visibility: hidden ，但是对于此解决scheme，隐藏的内容仍然占用空间 。 如果这对你无关紧要，你就是这么做的：

 span { visibility: hidden; } span:before { visibility: visible; } 

---

黑客的替代解决scheme

另一个解决scheme是设置跨度的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元素中维护相对字体大小。 （浏览器支持）

---

*此post的以前版本build议将字体大小设置为零。 但是，这在某些浏览器中无法正常工作，因为CSS没有定义当font-size设置为零时期望的行为。 为了实现跨浏览器的兼容性，请使用上述的小字号。

Answer 2

为更好的浏览器支持：

将应该隐藏的文本包裹在一个额外的span元素中，然后将类应用于该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

这个解决scheme的优点：

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

在这里看到它的行动： http : //jsfiddle.net/tinystride/A9SSb/

Answer 3

我不认为这是可能的纯CSS和HTML。 看这个例子http://jsbin.com/efeco4你会看到什么是内部CSS属性的属性，是由元素包装。; 所以对元素的任何操作也会影响CSS content 。

所以一个替代的想法可能是使用jquery，在不影响css content的情况下，用class hidetext清空标签div内的html内容。 示例代码可以是这样的：

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

例如： http ： //jsbin.com/efeco4/2