Breaking News: Grepper is joining You.com. Read the official announcement!

bold on hover but not add padding or distance

Grotesque Giraffe answered on May 29, 2021 Popularity 1/10 Helpfulness 1/10

answer bold on hover but not add padding or distance

bold on hover but not add padding or distance

Comment

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;
}

Popularity 1/10 Helpfulness 1/10 Language css

Source: stackoverflow.com

Tags: bold css distance hover

Link to this answer
Share Copy Link