Этот способ подчеркивание попался в сети интернет, который был выстроен на SCSS, где заинтересовало перевести на чистые стили CSS. Как получилось, вам решать, но все по эффекту отлично показывает, вместо полосы, как привыкли идти другие элементы дизайн. Но для этого будет предоставлена Demo страница, где можете оценить этот момент.
Подчеркивание - это способ привлечь внимание к важному тексту. Существует два основных способа подчеркнуть текст на страницах, элементы и свойство text-decoration CSS. Другой может быть предоставлен по требованию, что упрощает изменение состояния подчеркивания, применяя класс CSS к тексту.
Приступаем к установке:
HTML
CSS
Код
h3 {
position: fixed;
font-family: "Roboto Mono", monospace;
font-size: 60px;
color: #cfd8dc;
top: calc(50vh - 40px);
left: calc(50vw - 126px);
cursor: pointer;
transition: all 0.5s;
}
h3:hover {
border-bottom: 6px dotted #cfd8dc;
padding-bottom: 10px;
top: calc(50vh - 50px);
}
Существуют разные положения о том, полезны ли подчеркивания при передаче смысла или доступности. Одного цвета может быть недостаточно, чтобы передать смысл, а подчеркивание - естественный способ добавить дополнительную ценность для пользователя.
Демонстрация
