How make text-decoration: underline with 2px padding?

Question

I like an obedient frotend developer must create underline with 2px padding instead of 1px by default. Is exist simple solution for this?

PS Yeahh guys, I know about div

Answer 1

Simply use:

text-decoration: underline;
text-underline-position: under;

Answer 2

This is my solution...

HTML

<p>hola dasf  hola dasdsaddasds dsadasdd<span></span></p>

CSS

p {
  color: red;
  text-decoration: none;
  position: absolute;
}
a:hover {
    color: blue;
}
p span {
    display:block;
    border-bottom:3px solid black;
    width: 50%;
    padding-bottom: 4px;
}

Answer 3

#line{
    text-decoration-line: underline;
    text-underline-offset: 1px;
}

<div id="line">
Text with line
</div>

---

just use

{
    text-decoration-line: underline;
    text-underline-offset: 2px;
}

Answer 4

Try this:

.yourElement{
border-bottom: 1px solid #000;
line-height: 2;
}