Problem link text shaking (changing size/weight) on hover

Question

The first time page is loaded when i point my mouse over a link it starts to quickly change its size and/or its font-weight several times (like shaking), how it looks is here: https://youtu.be/kaEapSLiHAQ. I thought maybe it's my browser (using Waterfox) but same occurs in Chrome too. I use VS Code with Live Server plugin so may it be Live Server's bug? May transition cause it? If so, how do I fix it?

.header {
    display       : flex;
    flex-direction: column;
    align-items   : center;
}


.top-menu {
    display        : flex;
    list-style-type: none;
    border-bottom  : 1px solid rgba(0, 0, 0, .3);
}


.top-menu a {
    text-decoration: none;
    color          : #113453;
    padding        : 1em 1em .5em 1em;
    display        : block;
    transition     : color .5s;
    transition     : font-weight 1s;
    font-family    : 'Cormorant Unicase', serif;
    font-weight    : 300;
    margin         : 0 .1em;
    position       : relative;
    
}

.top-menu a:hover {
    color      : #404435;
    font-weight: 700;

}

<body class="page-content">
    <header>
        <nav class="header">
            
            <ul class="top-menu">
                <li><a href="#">О студии</a></li>
                <li><a href="#">Услуги</a></li>
                <li><a href="#">Вопрос-ответ</a></li>
            </ul>
        </nav>
    </header>
</body>

may be this will help [https://stackoverflow.com/questions/556153/inline-elements-shifting-when-made-bold-on-hover](https://stackoverflow.com/questions/556153/inline-elements-shifting-when-made-bold-on-hover) — sumeshsn1, Mar 17 '20 at 06:35
That's what I was looking for. Thank you sumeshsn1! Leave a separate answer please so I can mark it as a solution — PYTHON DEVELOPER999, Mar 17 '20 at 07:39
Glad, it helped! Please, consider accepting my answer.!! @python-developer999 — sumeshsn1, Mar 17 '20 at 13:46

score 1 · Accepted Answer · answered Mar 17 '20 at 09:12

here is the code:

.header {
    display       : flex;
    flex-direction: column;
    align-items   : center;
}
.top-menu {
    display        : flex;
    list-style-type: none;
    border-bottom  : 1px solid rgba(0, 0, 0, .3);
}
.top-menu li {
    display: inline-block;
    font-size: 0;
}
.top-menu li a {
    text-decoration: none;
    color: #113453;
    padding: 1em 1em .5em 1em;
    display:block;
    transition : color .5s;
    transition : font-weight 1s;
    text-align:center;
    font-family: 'Cormorant Unicase', serif;
    font-size: 16px;
    font-weight : 300;
    margin: 0 .1em;
    position: relative;
}
.top-menu li a:hover {
    color : #404435;
    font-weight:700;
}
.top-menu li a::before {
    display: block;
    content: attr(title);
    font-weight: bold;
    height: 0;
    overflow: hidden;
    visibility: hidden;
}

<body class="page-content">
    <header>
        <nav class="header">
            
            <ul class="top-menu">
                <li><a href="#" title="О студии">О студии</a></li>
                <li><a href="#" title="Услуги">Услуги</a></li>
                <li><a href="#" title="Вопрос-ответ">Вопрос-ответ</a></li>
            </ul>
        </nav>
    </header>
</body>

Problem link text shaking (changing size/weight) on hover

1 Answers1