user
Minulla on joitakin sanoja, jotka muodostavat lauseen html:ssä käyttämällä useita span-elementtejä. nyt haluan alleviivata sanat useilla viivoilla eri väreillä, niin että jokainen väri edustaa sanan luokkaa. siksi on oltava mahdollista saada useita viivoja eri väreillä alleviivaamaan yksi sana. luo html-, css- ja javascript-koodi, joka tekee tämän mahdolliseksi.
html-koodi näyttää jo tältä:
<!DOCTYPE html>
<html>

  <body>
    <p>
      <span id="word1">Hello</span>
      <span id="word2">täällä</span>
      <span id="word3">miten</span>
      <span id="word4">ovat</span>
      <span id="word5">sinut</span>
    </p>
  </body>

</html>
assistant
Tämä onnistuu käyttämällä `::before`- ja `::after`-pseudoelementtejä kullekin sanalle ja asettamalla niiden `border-bottom`-ominaisuus luomaan alleviivauksen. Tässä on koodi vaatimustasi varten:

**HTML:**

```html
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="styles.css" />
    <script src="script.js" defer></script>
  </head>
  <body>
    <p>
      <span class="word" id="word1">Hello</span>
      <span class="word" id="word2">täällä</span>
      <span class="word" id="word3">miten</span>
      <span class="word" id="word4">ovat</span>
      <span class="word" id="word5">sinut</span>
    </p>
  </body>
</html>
```

**CSS (styles.css):**

``css
.word {
  position: relative;
  display: inline-block;
}

.word::before,
.word::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 1px;
}

.word[data-kategoria1]::before {
  border-bottom: ;
  bottom: -4px;
}

.word[data-kategoria2]::after {
  border-bottom: ;
  bottom: -8px;
}
```

**JavaScript (script.js):**

```javascript
document.addEventListener('DOMContentLoaded', function () {
  const word1 = document.getElementById('word1');
  const word2 = document.getElementById('word2');
  const word3 = document.getElementById('word3');
  const word4 = document.getElementById('word4');
  const word5 = document.getElementById('word5');

  // Aseta luokat sanoille
  word1.dataset.category1 = true;
  word1.dataset.category2 = true;

  word2.dataset.category1 = true;

  word3.dataset.category2 = true;

  word4.dataset.category1 = true;
  word4.dataset.category2 = true;

  word5.dataset.category1 = true;
});
```

Tässä esimerkissä kategoria1 on punainen ja kategoria2 sininen. Voit laajentaa tätä niin, että se sisältää useampia kategorioita lisäämällä lisää pseudoelementtejä ja säätämällä `bottom`-ominaisuutta niiden oikean sijainnin varmistamiseksi.