列表中不限制寬度，hover時，字型font-weight：bold，防止抖動

你怕黑暗麼發表於2018-09-08

專案一個小問題困擾了很久，在一個沒有限制寬度的列表容器中，如果給hover時，給字型➕‘font-wieght:bold’容器就會變寬，然後移動的下一個容器，就會出現抖動，這樣很是影響使用者體驗，於是在網上各種搜解決這種缺陷的方法，終於找到這種隱藏偽類的方法，覺得是個不錯的技巧，原文一,
原文二

li, a {
    display:inline-block;
    text-align:center;
    font: normal 14px Open Sans;
    text-transform: uppercase;
}
a:hover {
    font-weight:bold;
}
a::after {
    display: block;
    content: attr(title);
    font-weight: bold;
    height: 0;
    overflow: hidden;
    visibility: hidden;
}

html

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

相關文章