How to generate a text that is just under a second text in HTML?

Question

I want to get exactly like this in html:

1 and 2 is just under the words even though the sentence's position changes like this:

How can I achieve this?

Note: I want also save this sentence with numbers and their positions to database which is another subject :)

Check this answer it will help you. : [https://stackoverflow.com/a/12431352/5909026](https://stackoverflow.com/a/12431352/5909026) — Najam Us Saqib, Jan 11 '19 at 13:29
You need to show us the [mcve] code that you're using before we can even make a start at offering suggetions. — David Thomas, Jan 11 '19 at 13:30
How can I supposed to write a code that I don't know. I might just write this: `
This is a sentence
` which is very basic. — ninbit, Jan 11 '19 at 14:20

score 2 · Accepted Answer · answered Jan 11 '19 at 13:36

Positioning and pseudo-elements are probably the cleanest solution to that. A more "dynamic" variant might look like this:

p {
  font-family: sans-serif;
  line-height: 2.5;
}

span {
  line-height: 1;
  position: relative;
  text-decoration: underline;
}

span::after {
  content: attr(data-number);
  left: 50%;
  position: absolute;
  top: 100%;
  transform: translateX(-50%);
}

<p>
  This <span data-number="1">sentence</span> has an underlined <span data-number="2">text</span>.
</p>

<p>
  This <span data-number="1">sentence</span> has<br>
  an underlined <span data-number="2">text</span>.
</p>

Just like what I want. Pseudo-elements is the key point and I didn't know its purpose till now. Thanks! — ninbit, Jan 11 '19 at 14:18

How to generate a text that is just under a second text in HTML?

1 Answers1