li {
display: inline-block; font-size: 0;}li a { display:inline-block; text-align:center; font: normal 16px Arial; text-transform: uppercase;}a:hover { font-weight:bold;}a::before { display: block; content: attr(title); font-weight: bold; height: 0; overflow: hidden; visibility: hidden;}<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>检查JSfiddle上的工作示例。这个想法是为伪元素中的粗体(或任何
:hover状态样式)内容保留空间,
:before并使用title标签作为内容源。



