Bogo
@Bogo

Как изменить отображение тегов abbr/acronym с помощью CSS?

По умолчанию теги abbr/acronym отображаются в браузерах (в частности Хром) достаточно неприятной глазу пунктирной линией подчеркивания.
Можно ли как-то исправить это с помощью стилей?
Интересуют готовые решения, например, переделать пунктирную линию на обычную линию подчеркивания или более редкую приятную глазу линию.
Возможно иное решение на ваш вкус.
  • Вопрос задан
  • 44 просмотра
Пригласить эксперта
Ответы на вопрос 2
yarkov
@yarkov
Проект "Жизнь после смерти" - lifeafterdeath.ru
https://jsfiddle.net/yarkov_aleksei/rh63auxt/
<abbr title="Содружество Независимых Государств">СНГ</abbr>

abbr[title] {
  text-decoration: none; // обнуляем стандартный стиль
  border-bottom: 1px solid red;
}
Ответ написан
Bogo
@Bogo Автор вопроса
Видимо эти

abbr {
    position: relative;
    text-decoration: none; // обнуляем стандартный стиль
    border-bottom: 1px solid black;
}

abbr:hover::after {
    position: absolute;
    bottom: 100%;
    left: 100%;
    display: block;
    padding: 1em;
    background: yellow;
    content: attr(title);
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы