CSS下划线的数字下划线

Question

如何使用css,html或javascript在下划线下方添加一个小数字,如下图所示？

Answer 1

这可以使用:after:pseudo-element.

div {
  font-size: 15px;
  width: 300px;
  line-height: 30px;
}
span {
  position: relative;
}
span:after {
  position: absolute;
  content: '2';
  width: 100%;
  height: 100%;
  top: 100%;
  left: 0;
  border-top: 1px solid black;
  text-align: center;
  font-size: 9px;
  line-height: 15px;
}

<div>over the <span>Triangle, a few months later,</span> another plane disappeared. A ship named the Sandra.</div>

如果要设置响应width度的div百分比单位,可以span通过设置避免换行white-space: pre.

Fiddle

在下面的示例中,width已设置25%为演示此操作.

div {
  font-size: 15px;
  width: 25%;
  line-height: 30px;
}
span {
  position: relative;
  white-space: pre;
}
span:after {
  position: absolute;
  content: '2';
  width: 100%;
  height: 100%;
  top: 100%;
  left: 0;
  border-top: 1px solid black;
  text-align: center;
  font-size: 9px;
  line-height: 15px;
}

<div>over the <span>Triangle, a few months later</span>, another plane disappeared. A ship named the Sandra.</div>

此外,您可以使用CSS的attr()函数从HTML元素中获取属性值:添加:伪元素.

div {
  font-size: 15px;
  width: 50%;
  line-height: 30px;
}
span {
  position: relative;
  white-space: pre;
}
span:after {
  position: absolute;
  content: attr(data-num);
  width: 100%;
  height: 100%;
  top: 100%;
  left: 0;
  border-top: 1px solid black;
  text-align: center;
  font-size: 9px;
  line-height: 15px;
}

<div>over the <span data-num="2">Triangle, a few months later</span>, another plane disappeared. A ship named the Sandra.</div>