title: Add an "underline" to a box with CSS
body: <p>I want to achieve something like this by CSS:</p>
  
  <p><img src="https://i.stack.imgur.com/3WGa9.png" alt="enter image description here"></p>
  
  <p>I'm a novice with CSS.</p>
  
  <p>My questions:</p>
  
  <ul>
  <li>How can I add a green line to the bottom as below? Will I have to add a small <code>div</code> under the <code>div</code> containing the text and set its background to green? I do know there are many ways to do it but I just want to learn the best practice.</li>
  <li>Is this font Arial?</li>
  </ul>