CSS文字加粗不影响整体宽度

知更鸟
知更鸟
站长
2331
文章
0
粉丝
Web前端评论315阅读模式

通过伪元素处理文字加粗造成整体宽度改变

CSS文字加粗不影响整体宽度

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>

本站文章大部分为原创,用于个人学习记录,可能对您有所帮助,仅供参考!

weinxin
我的微信
微信号已复制
版权声明
本站原创文章转载请注明文章出处及链接,谢谢合作!
 
知更鸟
匿名

发表评论

匿名网友
:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

拖动滑块以完成验证