Positioning the underline in text with CSS

Here's 2 ways to position the underline in text. The easiest way is to use text-underline-offset. Another way is to put the text in a <span> or <div> and use padding-bottom and border-bottom. Depending on whether text needs to be inline or not the <span> or <div> will need to have position of inline-block or block;