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>
    <li><a href="#">Fifth</a></li>
</ul>

SASS:

li, a
  display: inline-block
  text-align:...