Michael Florian Michael Florian - 9 months ago 42
CSS Question

How to create rolldown content with css?

how can i create rool down content with CSS?



the TEXT will be always seen but the INFO will show when the pointer click on TEXT.

Answer Source

You can use a pure CSS solution using CSS property content.

If you are interested to know more about content you can read this useful article.

.txt span{
.txt:hover:after {
  content:'info info info';
<p class="txt">text<p>

Or you can use a more "classic" approach, where instead you show hide a span tag:

.txt span {
  display: none;

.txt:hover span {
  display: block;
<p class="txt">text<span>some information</span><p>

Pro and Cons IMO:

First approach:

  • You can keep your HTML cleaner.
  • Info text won't be visible to Search Engines (could be a PRO or CON it depends of your use case).
  • IE < 8 do not support content property.

Second approach:

  • You can keep your "information" in the HTML.
  • Info will be visible to Search Engines.