Number underneath underlined text

How can i show a number in center underneath a underlined text?

My code works for simple cases, but when the text wraps, the number is no longer centered under the text:

current

I want something like this instead:

required

This is my code that is have written so far.

p {
  line-height: 28px;
}
.bottom_bullet_spn {
  position: relative;
  display: inline;
  vertical-align: top;
  padding: 0 0 20px;
}
.bottom_bullet {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  font-size: 9px !important;
  top: 13px;
  text-align: center;
}
<div class="question mb10  other_question ">
  <div style="vertical-align: top;padding-bottom: 1em;">

    <div class="questions_passage passage_content_1804">
      <p>Lorem ip<span style="display: inline; text-decoration: underline;" class="bottom_bullet_spn">sum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore mag<span class="bottom_bullet" data-order="1">1</span></span>na
        aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
        cupidatat non proident, sunt in culpa qui <span style="display: inline; text-decoration: underline;" class="bottom_bullet_spn">officia deserunt mollit anim id est laborum.<span class="bottom_bullet" data-order="2">2</span></span>
      </p>
    </div>
  </div>
</div>

JSfiddle

The number 2 is centered correctly but number 1 is not centered.


Source: css3

Leave a Reply