obsah z elementu DATA pres CSS do noveho prvku

by Petr Haluza

HTML

<div class="demo pred" data-demo="predchudce">
  <div class="box">
    1
  </div>
</div>

<div class="demo" data-demo="tento produkt">
  <div class="box">
    2
  </div>
</div>

<div class="demo nasl" data-demo="nasledovnik">
  <div class="box">
    3
  </div>
</div>

CSS

.demo:before {
    content: attr(data-demo);
    background:gray;
    text-align:center;
    padding:10px;
}
.demo.pred:before {
    background:yellow;
}
.demo.nasl:before {
    background:green;
}
.demo {float:left;}