Edit line thickness of CSS 'underline' attribute

Question

Since you can underline any text in CSS like so:

h4 {
    text-decoration: underline;
}

How can you also then edit the \'line\' that is drawn

Answer 1

My Solution : https://codepen.io/SOLESHOE/pen/QqJXYj

{
    display: inline-block;
    border-bottom: 1px solid;
    padding-bottom: 0;
    line-height: 70%;
}

You can adjust underline position with line-height value, underline thickness and style with border-bottom.

Beware to disable default underline behavior if you want to underline an href.