Inline elements shifting when made bold on hover

by

Pre-set the width by using an invisible pseudo-element which has the same content and styling as the parent hover style. Use a data attribute, like title, as the source for content.

li {
    display: inline-block;
    font-size: 0;
}

li a {
    display:inline-block;
    text-align:center;
    font: normal 16px Arial;
    text-transform: uppercase;
}

a:hover {
    font-weight:bold;
}

/* SOLUTION */
/* The pseudo element has the same content and hover style, so it pre-sets the width of the element and visibility: hidden hides the pseudo element from actual view. */
a::before {
    display: block;
    content: attr(title);
    font-weight: bold;
    height: 0;
    overflow: hidden;
    visibility: hidden;
}
<ul>
    <li><a href="#" title="height">height</a></li>
    <li><a href="#" title="icon">icon</a></li>
    <li><a href="#" title="left">left</a></li>
    <li><a href="#" title="letter-spacing">letter-spacing</a></li>
    <li><a href="#" title="line-height">line-height</a></li>
</ul>

More Related Contents:

  1. How to affect other elements when one element is hovered
  2. Changing image on hover with CSS/HTML
  3. How to show text on image when hovering?
  4. How to make in CSS an overlay over an image?
  5. How to remove/ignore :hover css style on touch devices
  6. Hover effects not working with IE8
  7. CSS On hover show another element
  8. Change image on hover
  9. How to hover only the current li in nested ul?
  10. Can I debug by CSS code in easy way for beginner?
  11. Setting columns in bootstrap grid
  12. How to write a:hover in inline CSS?
  13. Change color of PNG image via CSS?
  14. Use images instead of radio buttons
  15. Make footer stick to bottom of page correctly [duplicate]
  16. IE8 support for CSS Media Query
  17. How to get an IFrame to be responsive in iOS Safari?
  18. How can I make my flexbox layout take 100% vertical space?
  19. How to change one element while hovering over another
  20. add title attribute from css
  21. How to specify parameters to google chrome adobe pdf viewer?
  22. How to rotate and postion an element on the top left or top right corner?
  23. Make fill entire screen?
  24. Remove host component tag from html in angular 4
  25. How to display and hide a div with CSS?
  26. Bootstrap full-width text-input within inline-form
  27. Can you style html form buttons with css?
  28. Internet Explorer and clip-path
  29. Pseudo class :hover does not work in IE7
  30. Is it possible to hide the title from a link with CSS?

Leave a Comment