列表中不限制宽度,hover时,字体font-weight:bold,防止抖动

项目一个小问题困扰了很久,在一个没有限制宽度的列表容器中,如果给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>
posted @ 2018-09-08 14:41  你怕黑暗么  阅读(1625)  评论(1编辑  收藏  举报