Hide element, but show CSS generated content

by

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.

More Related Contents:

  1. Understanding CSS selector priority / specificity
  2. CSS Pseudo-classes with inline styles
  3. CSS negation pseudo-class :not() for parent/ancestor elements
  4. How can I select the last element with a specific class, not last child inside of parent?
  5. Are class names in CSS selectors case sensitive?
  6. Why doesn’t table > tr > td work when using the child selector?
  7. CSS selector by inline style attribute
  8. Matching the first/nth element of a certain type in the entire document
  9. :last-child not working as expected?
  10. Using CSS :before and :after pseudo-elements with inline CSS?
  11. :nth-child(even/odd) selector with class [duplicate]
  12. How to CSS: select element based on inner HTML [duplicate]
  13. :not(:empty) CSS selector is not working?
  14. How to exclude particular class name in CSS selector?
  15. What is the performance impact of the universal selector?
  16. What are the priorities among CSS selectors
  17. Why is nth-child selector not working?
  18. CSS selector with period in ID
  19. Is it possible to use CSS vars in CSS3 selectors?
  20. What is the ::content/::slotted pseudo-element and how does it work?
  21. CSS Selector “(A or B) and C”?
  22. How can I target a specific column or row in a CSS grid layout?
  23. How do I select an element that has a certain class?
  24. CSS attribute selector does not work a href
  25. How to use nth-child for styling with a table with rowspan?
  26. CSS Selector for No-Children-But-Not-Empty
  27. Is there a CSS not equals selector?
  28. How to select classes with spaces
  29. How can I get a specific number child using CSS?
  30. Why does .class:last-of-type not work as I expect?

Leave a Comment