使用CSS時，是否只能將:: before和:: after之間的內容定位為目標？

Question

我無權訪問JavaScript或HTML，只有CSS。

我正在嘗試將已經存在的文本更改為其他內容。

 #element::before { content: "This is the new text." } 

 <div id="element">This is the original text.</div> 

是否可以使用CSS專門定位舊文本，然后應用text-indent: -9999px; ？

Answer 1

不可能專門針對元素的文本節點； 請參閱是否有用於文本節點的CSS選擇器？ 欲獲得更多信息。

盡管正如Paulie_D所建議的那樣，您可以通過多種方式獲得想要的效果，但這是否是一個好主意取決於您要實現的目標。

 #element { visibility: hidden; } #element:before { content:"My new text using visibilty."; visibility: visible; } #element2 { font-size: 0; } #element2:before { content:"My new text using font-size."; font-size: 16px; } 

 <div id="element">This is the original text.</div> <div id="element2">This is the original text.</div> 

Answer 2

簡短的答案是：不，您不能使用CSS來定位元素內的文本，而與偽元素的內容無關。

但是，您可以通過將偽元素的內容粘貼到原始內容上然后隱藏它來創建解決方案。

注意：此方法使用絕對定位，因此如果偽元素內容過長，可能會產生問題。

更好的方法：一種替代方法是使用visibility屬性隱藏元素的主要內容，但使這些內容在偽元素中可見（貸記為Hidden-Hobbes ）。

 #element::before { content: "My new text."; display: block; color: black; position: absolute; background-color: yellow; width: 100%; } #element { color: red; position: relative; } #element-alt::before { content: "My new alt-text."; border: 1px dotted blue; visibility: visible; display: block; } #element-alt { border: 1px dotted gray; margin-top: 30px; visibility: hidden; } 

 <div id="element">This is the original text.</div> <div id="element-alt">This is the original text.</div>