CSS подчеркивание текста с номером ниже строки

Question

Как я могу подчеркнуть текст и добавить небольшое число под подчеркиванием, как на этом изображении, используя css, html или javascript?

Answer 1

Это возможно с помощью :after: Псевдо-элемент.

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,

скрипка

В приведенном ниже примере 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>

Answer 2

Используя ответ @chipChocolates, если вы не хотите помещать подписки в блок стилей CSS, а использовать их в теле, как вам нужно...

div {
  font-size: 15px;
  width: 300px;
  line-height: 30px;
}
span {
  position: relative;
  width: auto;
  height: 15px;
}
span:after {
  position: absolute;
  content: attr(subscript-line);
  width: 100%;
  height: 100%;
  top: 100%;
  left: 0;
  border-top: 1px solid black;
  text-align: center;
  font-size: 10px;
  line-height: 10px;
}

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