Data attribute

Data attribute is mainly related to HTML code and JavaScript. With data attribute, you can describe DOM elements and use these values in scripts, for example, for sorting, animation, or any other purpose. But how can it help you in CSS code? Let's consider the following example.

Issue – bold on hover moves the navigation

This is a pretty common issue on websites. Let's imagine that you have inline elements that react to a hover. After hovering, the element changes its font-weight from normal to bold. The effect is that every element after the hovered element is shifted to the right. Let's begin with the HTML code:

<ul> <li><a href="#">First</a></li> <li><a href="#">Second</a></li> <li><a href="#">Third</a></li> <li><a href="#">Fourth</a></li> ...

Get Professional CSS3 now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.