Multiply colorful underscore 2

by yiiBoy

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        /* Базовый стиль для всех слов */
        .word {
            display: inline-block; /* Отображение в строке с блокировкой для правильного позиционирования */
            position: relative; /* Относительное позиционирование для псевдоэлементов */
            margin-right: 10px; /* Отступ между словами */
        }

        /* Синий цвет подчеркивания */
        .underline-blue::before {
            content: ''; /* Псевдоэлемент для подчеркивания */
            position: absolute; /* Абсолютное позиционирование */
            left: 0;
            right: 0;
            bottom: -2px; /* Фиксированное значение отступа снизу */
            border-bottom: 3px solid #2196f3; /* Синее подчеркивание */
        }

        /* Красный цвет подчеркивания */
        .underline-red::after {
            content: ''; /* Псевдоэлемент для подчеркивания */
            position: absolute; /* Абсолютное позиционирование */
            left: 0;
            right: 0;
            bottom: -7px; /* Фиксированное значение отступа снизу */
            border-bottom: 3px solid #ff0000; /* Красное подчеркивание */
        }
    </style>
</head>
<body>

<p>Это пример текста с многоцветным подчеркиванием по номерам слов:</p>

<p>
    <span class="word underline-blue">Слово1</span> <!-- Слово с синим подчеркиванием -->
    <span class="word underline-blue underline-red">Слово2</span> <!-- Слово с синим и красным подчеркиванием -->
    <span class="word underline-blue underline-red">Слово3</span> <!-- Слово с синим и красным подчеркиванием -->
    <span class="word underline-red">Слово4</span> <!-- Слово с красным подчеркиванием -->
</p>

</body>
</html>