让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()问题

未处理前

处理后

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

content的使用

content和attr()配合使用

猜你喜欢