Как сделать пунктирное подчеркивание ссылок?

Question

[linardo]

Что прописать в ксс чтобы было пунктирное подчеркивание ссылок в wordpress? Тема woodmart

Answer 1

[Антон Романков]

Удобно, чтобы можно было добавить padding-bottom.

a {
  border-bottom: 1px dashed #cecece;
  padding-bottom: 3px;
}

Таким образом можно избавить от padding'a, не увеличивая физический размер элемента. Также можно анимировать появление / исчезновение.

a {
  position: relative
}

a::after {
  position: absolute;
  bottom: 10px;
  left: 0;
  display: block;
  content: '';
  width: 100%;
}

Ну и самый простой и некастомизируемый вариант, как написал Михаил Р.

Comments

[Михаил Р.]

и некастомизируемый вариант

Например?

[Антон Романков]

Михаил Р., непонятно, в чем ваш вопрос :-)

[Михаил Р.]

Антон Романков, в чем именно заключается "не кастомизация" text-decoration?

[Антон Романков]

1. Ограниченные эффекты текста: Невозможно применять к тексту различные эффекты, такие как размытие, тени или изменение цвета при использовании text-decoration. Это сильно ограничивает возможности стилизации текста.

2. Ограниченные варианты стилей линий: В CSS text-decoration доступны лишь ограниченные стили линий, такие как solid, dotted, dashed и double. Однако нельзя создать более сложные или нестандартные стили линий.

3. Невозможность размещения линий вне текста: Свойство text-decoration применяется к тексту напрямую, и нельзя легко создать эффекты, при которых линии находятся вне текста или перекрывают его.

4. Ограниченная кастомизация толщины и длины линий: Хотя можно указать толщину (text-decoration-thickness) и длину (text-decoration-skip-ink) линий для некоторых стилей, таких как underline и overline, эти параметры ограничены и не позволяют полностью контролировать внешний вид линий.

5. Ограниченные возможности анимации и переходов: Поскольку text-decoration не предоставляет множества анимационных или переходных свойств, анимировать или создавать плавные переходы для текста с примененным text-decoration затруднительно. Это ограничивает динамичность и интерактивность дизайна.

Answer 2

[Михаил Р.]

text-decoration