隱藏元素，但顯示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/