Help with javascript. Heading Underline class almost working

Design help Custom code
1

Hi everyone!

I’m trying to implement a headingstyle i made in figma but i fail. I feel like i’m already close though. I’m no Developer so I know not so much about javascript.

This is an example of the style i try to achieve:
example

What I want it to do:

  • background color for every line of heading (alls heading sizes). I call it underline
  • underline has a 99px corner radius and a color variable from my project
  • each line has its own underline
  • underline is as wide as my text (+ margin) → when text breaks the underline of f.e. line 2 shouldn’t be as wide as line 1 but as wide as line 2

My problem with my javascript (which i made together with a gpt so it’s maybe not that good. But it almost works!)

  • (my bg color is transparent) as you can now see every word has also a span with the background color. i dont want that
  • there is no space between my words
    1
    11317×276 25.6 KB
  • when a line breaks sometimes i have a double size background
    2
    21253×314 31.4 KB

can somebody help me?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Heading with Background</title>
    <style>
        .underlined-heading {
            position: relative;
            display: inline-block;
            line-height: 1.2; /* Adjust line height as needed */
            margin-top: 0; /* Reset top margin */
        }

        .underlined-heading span {
            position: relative;
            display: inline-block;
        }

        .underlined-heading span::before {
            content: '';
            position: absolute;
            top: 0.3em; /* Adjust as needed */
            left: 0;
            right: 0;
            bottom: -0.1em; /* Adjust as needed */
            background-color: var(--background-color--background-button-transparent);
            border-radius: 99px;
            z-index: -1;
        }

        @media (max-width: 600px) {
            .underlined-heading {
                font-size: calc(1.5rem + 1vw);
                line-height: 1.3;
            }
        }
    </style>
</head>
<body>
    <h1 class="underlined-heading">
        This is a responsive heading that may break into multiple lines
    </h1>
    <h2 class="underlined-heading">
        Another heading with the same style and it might also break into multiple lines
    </h2>
    <h3 class="underlined-heading">
        Yet another heading that can break into multiple lines
    </h4>
    <h4 class="underlined-heading">
        A shorter heading
    </h4>
    <h5 class="underlined-heading">
        Another short heading
    </h5>
    <h6 class="underlined-heading">
        The smallest heading
    </h6>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const headings = document.querySelectorAll('.underlined-heading');
            headings.forEach(heading => {
                const words = heading.innerText.split(' ');
                heading.innerHTML = ''; // Clear the current content

                let lineSpan = document.createElement('span');
                heading.appendChild(lineSpan);

                words.forEach(word => {
                    const testSpan = document.createElement('span');
                    testSpan.innerText = word + ' ';
                    heading.appendChild(testSpan);

                    const testSpanRect = testSpan.getBoundingClientRect();
                    const lineSpanRect = lineSpan.getBoundingClientRect();

                    if (testSpanRect.top > lineSpanRect.top) {
                        lineSpan = document.createElement('span');
                        heading.appendChild(lineSpan);
                    }
                    
                    lineSpan.appendChild(testSpan);
                });
            });
        });
    </script>
</body>
</html>

Here is my site Read-Only: LINK