JSFiddle - React, Tailwind, and code Playground

by Michael Danilov

HTML

<div class="wrap"><div class="underline default">Подчёркивание по дефолту</div></div>
<div class="wrap"><div class="underline border">Подчёркивание нижней границей</div></div>
<div class="wrap"><div class="underline default multiline">Подчёркивание по дефолту <br>для многострочных текстов</div></div>
<div class="wrap"><div class="underline border multiline">Подчёркивание нижней границей <br>для многострочных текстов</div></div>
<div class="wrap"><div class="underline mix multiline"><span>Подчёркивание нижней границей для многострочных текстов, где цвет текста отличается от цвета подчёркивания</span></div></div>

SCSS

.wrap {
  margin: 0 10px 20px;
}

.underline {
  display: inline-block;
  font-size: 20px;
  line-height: 1.4;
  color: #000;

  &.default {
    text-decoration: underline;
  }

  &.border {
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
  }

  &.mix {
    span {
      border-bottom: 1px solid rgba(255, 0, 0, 0.3);
    }
  }
}