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

知更鸟 Web前端评论121阅读模式

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

文章源自知更鸟-https://zmingcx.com/css-text-bold-does-not-affect-width.html

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

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

文章源自知更鸟-https://zmingcx.com/css-text-bold-does-not-affect-width.html

<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>
文章源自知更鸟-https://zmingcx.com/css-text-bold-does-not-affect-width.html文章源自知更鸟-https://zmingcx.com/css-text-bold-does-not-affect-width.html
weinxin
版权声明
本站原创文章转载请注明文章出处及链接,谢谢合作!
匿名

发表评论

匿名网友 填写信息

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

确定