A Portfolio and blog for Mustafa Kurtuldu

My new best CSS friend - content: attr(data);

How to use the data attribute in CSS content

I have been experimenting with the CSS content property quite a bit lately. What I discovered is you can populate it with the HTML data attribute.

For example, say we wanted an item to have a tooltip. We would write out the HTML like this:

<a href="#" id="my-link" data-tooltip="this is my tooltip data">This is my link</a>

Now in the CSS all we have to do is:

#my-link {
    position: relative;

  #my-link:before {
     diplay: block;
     content: "";
     position: absolute;
     bottom: -40px;
     opacity: 0.6;
     color: #fff;

  #my-link:hover:before {
    content: attr(data-tooltip);
    padding: 2px;
    border-radius: 5px;
    background: #000;

Now we have a working tooltip without JavaScript. Of course, we could style it some more to make it even more tooltipy, but you get the idea. Check out the demo.