隐藏元素，但显示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和:before设置display: inline，但两者仍然隐藏着
;
• 使用width: 0; overflow: hidden，但随后额外空间似乎使用彩色
• 被添加：透明;但是然后，当然，跨度的内容仍然占据空间
• 使用text-indent: -....px，但
  （？）
  1. 这是通过搜索引擎皱眉和
  2. 似乎不是为span元素工作（？）

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

Answer 1

清理解决方案

你可以使用visibility: hidden，但这种解决方案，隐藏的内容将仍然占用空间。如果这不要紧，你，这是你会怎么做：

span { 
    visibility: hidden; 
} 

span:before { 
    visibility: visible; 
} 

---

hackish的替代解决方案

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

Example on jsfiddle.

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

---

*此帖子的以前版本建议将字体大小设置为零。但是，这在某些浏览器中不起作用，因为CSS没有定义预期的行为when the font-size is set to zero。为了实现跨浏览器兼容性，请使用上述的小字号。

Answer 2

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

所以一个替代的想法可能是使用jQuery来清空标签div中的HTML内容与类hidetext而不影响css的content。样本代码可能是这样的：

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

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

Answer 3

为了更好的浏览器支持：

裹应该附加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/