让css的字体加粗后不影响宽度变化与content和attr()问题

未处理前

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Title</title><style>ul {list-style: none;display: flex;}li {border: 1px solid red;padding: 10px;/* width: 50px; */}li:hover {font-weight: bold;/* text-shadow: 0 0 0.9px gray; */}</style></head><body><ul><li>hhhhhhhhhhhhh</li><li>eeeeeeeeeeeeeeeeee</li><li>lllllllllllllll</li></ul><script></script></body>
</html>

处理后

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Title</title><style>ul {list-style: none;display: flex;}li {border: 1px solid red;padding: 10px;}li::before {display: block;content: attr(title);font-weight: bold;height: 0;overflow: hidden;visibility: hidden;}li:hover {font-weight: bold;}</style></head><body><ul><li title="hhhhhhhhhhhhh">hhhhhhhhhhhhh</li><li title="eeeeeeeeeeeeeeeeee">eeeeeeeeeeeeeeeeee</li><li title="lllllllllllllll">lllllllllllllll</li></ul><script></script></body>
</html>

看到content：attr(title)是不是感觉到很奇怪呢

content的使用

content一般和:before,:after一起使用，用来生成内容(img和input没有该属性)，content的内容一般可以为以下四种：

 none： 不生成任何值。attr： 插入标签属性值url： 使用指定的绝对或相对地址插入一个外部资源（图像，声频，视频或浏览器支持的其他任何资源）string： 插入字符串

content和attr()配合使用

attr属性通常和自定义属性data-配合使用，因为传统的其它属性虽然也能存值，但通常不适合存放表达性文字。

<div data-line="1"></div>div[data-line]:after { content: attr(data-line);/* 属性名称上不要加引号！ */ }

让css的字体加粗后不影响宽度变化与content和attr()问题相关推荐

仿宋GB213字体加粗后笔画发虚
问题描述:仿宋字体GB213加粗后笔画发虚原因分析:第一,长城出品的仿宋GB2312字体(以下简称长城仿宋)笔画是没有合并的,而后来微软自带的仿宋(中易出品,简称中易仿宋),全部笔画是合并的第二个 ...
CSS之字体加粗font-weight
font-weight参数如下: parameter connotation normal 无效果 bold 粗体 lighter 细体 bolder 特粗体 number 其值为100的整数倍如1 ...
php 怎么给字体加粗,css怎么把字体加粗加大
css把字体加粗加大的方法:可以利用font-weight属性来实现,如[font-weight: bold;].font-weight属性用于设置文本的粗细,bold用于定义粗体字符. 相关属性: ...
html语言怎么让字体加粗,css怎么让字体加粗？
我们常常对HTML代码中文字字体进行加粗,无论中文.英文.数字以及符合进行加粗布局.下面我们来看一下如何使用css设置字体加粗. css设置字体加粗使用css属性font-weight.该属性用于设置 ...
HTML中如何将字体加粗-前端入门
在HTML中要将字体加粗我们有两种方法,一种是利用b标签:另一种是利用strong标签,本篇文章我们就来介绍一下HTML中b标签和strong标签的用法. b标签和strong标签虽然都是可以让字体加 ...
php如何把文字加粗,HTML中如何将字体加粗
在HTML中要将字体加粗我们有两种方法,一种是利用b标签:另一种是利用strong标签,本篇文章我们就来介绍一下HTML中b标签和strong标签的用法. b标签和strong标签虽然都是可以让字体加 ...
html如何使文本变为粗体_HTML中如何将字体加粗
在HTML中要将字体加粗我们有两种方法,一种是利用b标签:另一种是利用strong标签,本篇文章我们就来介绍一下HTML中b标签和strong标签的用法. web前端学习:打造全网web前端全栈资料库 ...
在html中加粗字体的文本链接,css如何设置超链接字体加粗效果
css如何设置超链接字体加粗效果发布时间:2020-11-18 10:23:39 来源:亿速云阅读:140 作者:小新小编给大家分享一下css如何设置超链接字体加粗效果,希望大家阅读完这篇文章后 ...
html如何修改字体加粗取消,CSS去掉b的加粗和strong的加粗
应用DIV+CSS去掉html中b加粗和strong加粗款式 1.运用CSS格式属性单词: font-weight 2.语法去掉对象加粗:font-weight:normal 翰墨字体加粗:font ...
产生粗体字的html标签,html字体加粗用css设置文字粗体样式
html如何加粗文字,HTML加粗标签元素有哪些?CSS字体加粗又怎么来实现?粗体代码是什么? 综合以上问题,可以使用CSS样式和HTML标签两种方法来实现,在实际布局时候根据需要来选择文字字体加粗方 ...

让css的字体加粗后不影响宽度变化与content和attr()问题

未处理前

处理后

看到content：attr(title)是不是感觉到很奇怪呢

content的使用

content和attr()配合使用

让css的字体加粗后不影响宽度变化与content和attr()问题相关推荐

最新文章

热门文章