Hide an element but show CSS generated content.

Question

Is there a way to hide the contents of an element, but keep its contents :before visible? Let's say I have the following code:

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? } 

I tried:

• using display: none and setting display: inline to :before , but both are still hidden
• using width: 0; overflow: hidden width: 0; overflow: hidden ; but then extra space (?) is added
• using color: transparent; but then, of course, the contents of the range still take up space
• using text-indent: -....px , but
  • it is dissatisfied with search engines and
  • It doesn't seem to work for span (?) Elements

Any other ideas on how I can do this?

Answer 1

Clean solution

You can use visibility: hidden , but with this solution, hidden content will still take up space. If that doesn't matter to you, here's how you do it:

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

---

Hackish Alternative

Another solution would be to set a font-size span to zero * really small value. The advantage of this method: hidden content does not take up space. Disadvantage: you cannot use relative units, such as em or%, for the font size :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 example.

Update (May 4, 2015):. With CSS3, you can use the rem (Root EM) block to maintain the relative font sizes in the :before element. (browser support.)

---

* A previous version of this post suggests setting the font size to zero. However, in some browsers this does not work as desired, because CSS does not determine what behavior is expected when the font size is set to zero . For compatibility with multiple browsers, use a small font size as described above.

Answer 2

For better browser support:

Wrap the text that should be hidden in the optional span element, and apply classes to this range to hide the text that you want to hide.

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; } 

The .visuallyhidden class used above refers to the current version of the HTML5 Boilerplate : https://github.com/h5bp/html5-boilerplate/blob/master/css/main.css

Benefits of this solution:

• Semantic HTML
• Full browser support.
• There is no problem with tiny text such as other small font-size solutions.
• Hidden content won't take up space

See here: http://jsfiddle.net/tinystride/A9SSb/

Answer 3

Based on the excellent hacker @anroesti, there is a solution here if you need to apply in an unknown context in terms of font size and color, i.e. you are not sure if resetting to color:black;font-size:1rem; won't ruin things

 <span abbrev-content="Intl.">International</span> @media only screen and (max-width: 700px) { /* very narrow viewports */ span[abbrev-content] { font-size: 0.001em; visibility: hidden; } span[abbrev-content]::before { content: attr(abbrev-content); font-size: 1000em; visibility: visible; } } 

If your content range is a paragraph, not just a word, you may also need a negative letter spacing.

Answer 4

I have chosen a similar approach proposed here with visibility , but it still has a field for content.

My solution is to simply use font-size to hide the target text.

 span { font-size: 0; } span:before { font-size: 16px; } 

Answer 5

I don't think this is possible with pure css and html. Looking at this example http://jsbin.com/efeco4 , you will see that what is inside the content css property is wrapped with an element. Therefore, any manipulation of the element will also affect css content .

So an alternative thought might be to use jquery to clear the html content inside the div tag with the hidetext class without affecting the content css. Sample code could be as follows:

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

Example: http://jsbin.com/efeco4/2