Не может создать текст, подчеркнутый с использованием CSS, который соответствует моему дизайну ⇐ CSS

[Anonymous]

Я пытаюсь создать этот пользовательский интерфейс из файла дизайна и не могу точно соответствовать. Я могу создать что -то подобное, но подчеркивание имеет прокладку до/после каждой строки, которую я не могу воспроизвести. По мере того, как текст охватывает больше строк, подчеркивание показывает расширение до/после каждой строки. Решение также должно работать в адаптивной макете.

Я создал что-то подобное, используя текстовые. LINE. < /p>

Код: Выделить всё

div {
background:#09333c;
padding: 2rem;
max-width: 275px;
}

p {
color: white;
font-size: xx-large;
font-weight: bold;
text-decoration: underline;
text-align: center;
text-decoration-thickness: 0.3em;
text-underline-offset: -0.2em;
text-decoration-skip-ink: none;
text-decoration-color: #20a9b3;
}< /code>

Lorem ipsum dolor amet

Подробнее здесь: https://stackoverflow.com/questions/797 ... -my-design