通过伪元素处理文字加粗造成整体宽度改变
CSS文字加粗不影响整体宽度
<html>
<head>
<title>CSS文字加粗不影响宽度</title>
<style type="text/css">
li {
display: inline-block;
font-size: 0;
}
li a {
font: normal 16px Arial;
}
a:hover {
font-weight: 700;
}
a:before {
display: block;
content: attr(title);
font-weight: bold;
height: 0;
overflow: hidden;
visibility: hidden;
}
</style>
</head>
<body>
<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>
</body>
</html>本站文章大部分为原创，用于个人学习记录，可能对您有所帮助，仅供参考！
我的微信
微信号已复制
版权声明
本站原创文章转载请注明文章出处及链接，谢谢合作！