CSS 字体加粗，导致布局宽度改变怎么处理？

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

在网上查阅了很多资料，发现用伪元素处理效果最好。下面是一个demo

      ul > li {display: flex;padding: 4px 10px;font-size: 16px;border: 1px solid red;}ul > li::after {display: block;content: attr(title);font-weight: bold;visibility: hidden;height: 1px;color: transparent;margin-bottom: -1px;overflow: hidden;}ul > li:hover {font-weight: bold;}

    <ul><li title="内容11111">内容11111</li><li title="内容222222222222">内容222222222222</li><li title="内容333">内容333</li></ul>

demo效果图：

Tab组件使用伪元素后的效果：

CSS 字体加粗，导致布局宽度改变怎么处理？相关推荐

css 字体加粗_HTML基础属性与CSS基础
有头发且有趣的码农万里挑一~ 40 有料叔 | 一位有故事的程序猿 1HTML基础属性 1.class属性:用于定义元素的类名,如需为一个元素规定多个类,用空格分隔类名定义格式: 2.name属性: ...
产生粗体字的html标签,html字体加粗用css设置文字粗体样式
html如何加粗文字,HTML加粗标签元素有哪些?CSS字体加粗又怎么来实现?粗体代码是什么? 综合以上问题,可以使用CSS样式和HTML标签两种方法来实现,在实际布局时候根据需要来选择文字字体加粗方 ...
html语言加粗,html字体加粗用css设置文字粗体样式
HTML加粗标签元素有哪些?CSS字体加粗又怎么来实现?粗体代码是什么? 综合以上问题,可以使用CSS样式和HTML标签两种方法来实现,在实际布局时候根据需要来选择文字字体加粗方法途径. 一.html ...
html语言怎么让字体加粗,css怎么让字体加粗？
我们常常对HTML代码中文字字体进行加粗,无论中文.英文.数字以及符合进行加粗布局.下面我们来看一下如何使用css设置字体加粗. css设置字体加粗使用css属性font-weight.该属性用于设置 ...
php 怎么给字体加粗,css怎么把字体加粗加大
css把字体加粗加大的方法:可以利用font-weight属性来实现,如[font-weight: bold;].font-weight属性用于设置文本的粗细,bold用于定义粗体字符. 相关属性: ...
css 利用阴影给字体加粗
想要把字体加粗,但是css样式提供的最粗的font-weight:900;也达不到要求时,可以利用css的text-shadow给字体加上多个阴影从而把字体调的更粗一点,当然直接换字体也是可以的. 正 ...
CSS之id和class区别以及字体加粗样式
字体加粗方式: font-weight: bold; 或者通过值来加粗: font-weight:800; html中对字体加粗的其他方式: <b></b>或<stron ...
html加粗代码样式,css如何设置字体加粗样式？
css可以通过font-weight属性来设置字体加粗.font-weight属性可用于设置文本的粗细,一般设置该属性的值为bold或bolder来加粗字体. css可以通过font-weight属性 ...
在html中加粗字体的文本链接,css如何设置超链接字体加粗效果
css如何设置超链接字体加粗效果发布时间:2020-11-18 10:23:39 来源:亿速云阅读:140 作者:小新小编给大家分享一下css如何设置超链接字体加粗效果,希望大家阅读完这篇文章后 ...
在html css中加粗显示,在CSS里面如何实现字体加粗
在word里面实现文字加粗是一件轻而易举的事.我们直接点击加粗按钮就可以完成.但是在css里面没有加粗按钮呀,那么如何实现字体加粗呢?下面小编向大家简单介绍一下. 1.使用font-weight属性 ...

CSS 字体加粗，导致布局宽度改变怎么处理？

CSS 字体加粗，导致布局宽度改变怎么处理？相关推荐

最新文章

热门文章