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

You can do this with a bit of a hack using ::after elements, and positioning them manually. This does mean that you have to maintain the content attribute of the after element but you could make this easier by using a data attribute in the html tag and referring to it. See the example below -

span:after {
    font-size: 1rem;
    position: absolute;
    content: 'Hello there..';
    width: 100%;
    height: 100%;
    white-space: pre;
    text-decoration-skip-ink: none;
    text-decoration-line: underline;
    left: 0px;
    top: 10px;
    color: white;
    z-index: -1;
    text-decoration: underline;
    text-decoration-style: wavy;
    text-decoration-color: black;
}

span {
  position: relative;
}

Hello there