Hide element, but show CSS generated content

Question

Is there a way of hiding an element's contents, but keep its :before content visible? 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've tried:

• using display: none and setting display: inline on :before, but both are still hidden
• using width: 0; overflow: hidden;, but then additional space seems to be added (?)
• using color: transparent;, but then, of course, the content of the span still takes up space
• using text-indent: -....px, but
  1. this is frowned upon by search engines and
  2. it seems not to work for span elements (?)

Any other ideas as to how I might do this?

Answer 1

Clean Solution

You could use visibility: hidden, but with this solution, the hidden content will still take up space. If this doesn't matter to you, this is how you would do it:

span {
    visibility: hidden;
}

span:before {
    visibility: visible;
}

---

Hackish Alternative Solution

Another solution would be to set the font-size of the span to zero* to a really small value. Advantage of this method: The hidden content won't take up any space. Drawback: You won't be able to use relative units like em or % for the font-size of the :before content.

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.

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

---

*A previous version of this post suggested setting the font size to zero. However, this does not work as desired in some browsers, because CSS does not define what behavior is expected when the font-size is set to zero. For cross-browser compatibility, use a small font size like mentioned above.

Answer 2

For better browser support:

Wrap the text that should be hidden within an additional span element, and apply classes to that span to hide the text you wish to be hidden.

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 is from the current version of HTML5 Boilerplate: https://github.com/h5bp/html5-boilerplate/blob/master/css/main.css

The advantages of this solution:

• Semantic HTML
• Complete browser support
• No problems with tiny text like other small font-size solutions.
• The hidden content won't take up space

See it in action here: http://jsfiddle.net/tinystride/A9SSb/

Answer 3

Building on @anroesti's excellent hack, here's a solution if you need to apply in unknown contexts in terms of font size and color, i.e. you are not sure if resetting to color:black;font-size:1rem; will not mess things up:

<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 span content is a paragraph and not just a word, you may also need the negative letter-spacing.

Answer 4

I took a similar approach as suggested here with visibility, but that still has a content box.

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

span {
    font-size: 0;
}

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