James McGrath

Positioning the underline in text with CSS

Mar 22, 2021
1 minute

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;

See the Pen 2 ways to adjust the underline of text by James (@jamcgrath) on CodePen.