Декоративное подчеркивание

CSS
body {
  width: 550px;
  margin: 0;
  padding: 0 10px;

  font-family: "Arial", sans-serif;
  font-size: 26px;
}

p {
  text-align: center;
}

a {
  color: #0088cc;
  text-decoration: none;
  
  border-top: 3px dashed #0088cc;
  border-right: 3px solid #0088cc;
  border-bottom: 3px dotted #0088cc;
  border-left: 3px solid #0088cc;
}

Результат 95%. Верхняя граница не совпадает с образцом. В чем ошибка?

1 лайк
сверху не граница, а подчеркивание
a {
  color: #0088cc;
  text-decoration: dashed overline;

  border-bottom: 3px dotted;
  border-left: 3px solid;
  border-right: 3px solid;
}

на решение вас должно было натолкнуть, что размеры 3, а не 5 или 2 как обычно.

4 лайка

И ответьте также еще на один вопрос, пожалуйста!
Можно ли свойством text-decoration (или его составными свойствами) задать одновременно для одного элемента подчеркивание в стиле dashed и надчеркивание в стиле dotted?

Простите, а размеры чего (3, а не 5 или 2) должны были натолкнуть меня на ответ?..
У меня просто такой же вопрос возник…

2 лайка

text-decoration:overline dashed

1 лайк


Не знаю правильно это или нет, но результат 100%, долго ломал голову как сделать такую мелочь

1 лайк

Привет! У меня так не получалось, поломал голову получил это.

Немного бесит, что вроде бы делаешь как надо, но все-равно не 100%. И все от того, что кто-то так решил, что должно быть не
border-top: dashed;
а
text-decoration: overline dashed;

визуально разницы нет (пару пикселей? но это относительно картинки заложенной тут), но решение уже не 100%.

с одной стороны находишь другие решения вопроса, которые могут пригодиться, а с другой - все это бесит, вроде бы решил задачу, а 100% не дают :slight_smile:

или я не уловил какую-то принципиальную разницу?

3 лайка

У меня получилось вот так:

2 лайка
border-style: none solid dotted solid;

также можно сократить, зачем много печатать.
И ***(ой) ох уж мне этот text-decoration спасибо за подсказку

2 лайка

Я так и не понял зачем нужно было вводить толщину линии в 3px?
И без указания толщины все засчитывается на 100% :grinning:

1 лайк


Получилось на 100%, хотя border пока не рассматривали.

У меня тоже так получилось. Пишет 100% но верхняя линия выше чем на образце. Что то сделал не так.

тоже не пойму Зачем px начали использовать. В самом начале для проверки 1px поставил когда увидел что верхняя линия выше чем нужно но потом понял что это сделает ее только еще выше. Как опустить так и не понял хотя продолжает писать 100%. Может один написал а остальные просто скопировали?

У меня получилось так. Тоже пришлось поломать голову. )))

думаю в теме надо дополнительно рассказать про зависимость результата использования от числа значений