JSFiddle - React, Tailwind, and code Playground

HTML

<h1></h1>
<p>This sentence contains several annotations.</p>

<h1></h1>
<p>
<span class="word">
  <span class="anno tick"><b>0%</b> 0</span>
  <span class="line">This</span>
  <span class="anno line under"></span>
</span>

<span class="word">
  <span class="anno tick"><b>20%</b> 1</span>
  <span class="line">sentence</span>
  <span class="anno line under"></span>
</span>

<span class="word">
  <span class="anno tick"><b>40%</b> 2</span>
  <span class="line">contains</span>
  <span class="anno line under">8</span>
</span>

<span class="word">
  <span class="anno tick"><b>60%</b> 3</span>
  <span class="line">several</span>
  <span class="anno line under"></span>
</span>

<span class="word">
  <span class="anno tick"><b>80%</b> 4</span>
  <span class="line">annotations.</span>
  <span class="anno line under">11</span>
</span>
</p>

CSS

html { font-size: 1.5em; }
.word {
    display: inline-block;
    vertical-align: top;
    margin-bottom: 1rem;
    position: relative;
}
.word .line {
    display: block;
}
.word .line.under {
    text-align: center;
    height: 1em;
}
.anno {
    font-size: 0.75rem;
    color: #789;
    
    user-select: none;
    pointer-events: none;
    z-index: -1;
}
.tick {
    font-size: 0.6rem;
    position: absolute;
    top: -1em;
    left: -0.125rem;
    
    padding-left: 0.125rem;
    border-left: 1px solid currentColor;
    display: block;
    height: calc(1em + 1.125rem);
}