HTML/CSS

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

也想出现在这里?联系我们
创客云

在写 Tab 组件时(每一项的数据都从后台获取,width 宽度不定,使用 padding 隔开),下划线时通过计算每一项的宽度实现滑动效果,字体加粗标记当前项,且当鼠标 hover 时,对应项的字体也加粗,此时由于字体加导致粗宽度变化了,所以滑块位置也偏移了,想到用鼠标的 mouseenter 和 mouseleave 重新计算宽度,但是比较麻烦,有没有好的方法处理,使字体加粗不影响宽度的改变?
CSS 文字加粗不影响整体宽度
通过伪元素处理文字加粗造成整体宽度改变

  1. <style>
  2.       ul > li {
  3.         display: flex;
  4.         padding: 4px 10px;
  5.         font-size: 16px;
  6.         border: 1px solid red;
  7.       }
  8.       ul > li::after {
  9.         display: block;
  10.         content: attr(title);
  11.         font-weight: bold;
  12.         visibility: hidden;
  13.         height: 1px;
  14.         color: transparent;
  15.         margin-bottom: -1px;
  16.         overflow: hidden;
  17.       }
  18.       ul > li:hover {
  19.         font-weight: bold;
  20.       }
  21. </style>
  22. <ul>
  23.       <li title="内容11111">内容11111</li>
  24.       <li title="内容222222222222">内容222222222222</li>
  25.       <li title="内容333">内容333</li>
  26.     </ul>
也想出现在这里?联系我们
创客主机

使用伪元素后的效果:
CSS 文字加粗不影响整体宽度

资源下载此资源下载价格为5立即购买,VIP 免费

收藏
(0)

本文由 云模板 作者:PetitQ 发表,转载请注明来源!

也想出现在这里?联系我们
创客主机

发表评论

热销模板

Hub - 响应式可视化编辑企业官网WordPress汉化模板

Envato

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!

请扫码添加QQ好友后咨询!