css让数字或图标在文本末尾且小字号时居中显示

如何让一个数字或图标放置在文本末尾，并且当它的高度小于文本高度时居中显示？

问题分析

要解决这个问题，可以应用CSS的伪元素::after或::before，在元素后再插入所需的数字或图标。然而，要使图标在文本下方居中对齐，需要一些额外的CSS属性。

解决方案

立即学习“前端免费学习笔记（深入）”；

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

可以使用以下CSS代码：

span::after {
  content: "666";
  font-size: 12px;
  position: absolute;
  bottom: -4px;
  left: 100%;
  margin-left: -10px;
}

• position: absolute;将数字或图标置于绝对定位，摆脱文本流。
• bottom: -4px;将数字或图标悬浮在文本下方4像素处。
• left: 100%;将数字或图标放在一行文本的最外侧。
• margin-left: -10px;将数字或图标的左侧边距设置为负值，居中对齐其内容。

代码示例

以下代码示例演示了如何使用该CSS规则：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      span::after {
        content: "666";
        font-size: 12px;
        position: absolute;
        bottom: -4px;
        left: 100%;
        margin-left: -10px;
      }
    </style>
  </head>
  <body>
    <span>
      一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字
    </span>
  </body>
</html>

使用此代码，数字"666"将附加到文本末尾，并且如果它的高度小于文本高度，它将垂直居中显示。