使用CSS时，是否只能将:: before和:: after之间的内容定位为目标？

Question

I do not have access to the JavaScript or HTML, only the CSS.

I am trying to change the text that is already there, to something else.

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

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

Is it possible to target the old text specifically with CSS, to then maybe apply text-indent: -9999px; ?

Answer 1

It is not possible to specifically target the text node of an element; see Is there a CSS selector for text nodes? for more information.

You could achieve the effect you are after in a variety of ways, although as Paulie_D suggests, whether this is a good idea depends on what you are trying to achieve.

 #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

The short answer is: no, you cannot use CSS to target the text within the element independently of the content of the pseudo elements.

However, you can create a work around by pasting the content of the pseudo element over the original content and thus hide it.

Note: This approach uses absolute positioning so it may created issues if the pseudo-element content is excessively long.

Better Approach: An alternative approach is to use the visibility property to hide the main content of the element but make visible the content from the pseudo-elements (credit to 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>