Although CSS has an underline property text-decoration: underline, this property is very crude and cannot be modified.
Solution one
uses the border attribute
{
border-bottom: 1px solid gray;
text-decoration: none;
}
You can customize the color, line width and line shape of the underline simulated by border-bottom. But the distance between the line and the word or the gap is large. 
If you set a relatively small line-height, such as line-height: .9, the distance can indeed be reduced, but another problem arises: preventing normal text wrapping.
Solution two:
use background-image property
background: linear-gradient(gray, gray) no-repeat;
background-size: 100% 1px;
background-position: 0 1.115em;
text-shadow: .05em 0 white, -0.05em 0 white;
The effect is great. Different line types can also be implemented: such as dashed underline
background: linear-gradient(90deg, gray 66%, transparent 0) repeat-x;
background-size: .2em 2px;
backgrond-position: 0 1em;
The percentage position value of the color scale can be used to fine-tune the virtual-to-solid ratio of the dotted line, and the density of the dotted line can also be changed through the background-size.