text-decoration-style: dashed; - криво отображается

Question

Криво отображается text-decoration-style: dashed; в Chrome

Answer 1

Скорее всего это связанно с шрифтом + рендером браузера..

Думаю проще сделать велосипед, т.е. свой text-decoration: dashed;
Вариант при помощи linear-gradient

body {
  font-size: 150%;
  color: #333;
}

.text-dashed {
  --td-color: #444; /* Цвет пунктира */
  --td-size: 2px;   /* Размер пунктира */
  /**/
  background-image: linear-gradient(to right, var(--td-color), var(--td-color) 49.9%, transparent 50%);
  background-repeat: round no-repeat;
  background-position: 0 calc(1em - (var(--td-size) / 2));
  background-size: calc(var(--td-size) * 2) var(--td-size);
}

<span class="text-dashed">Заказать звонок</span>
<br><br>
<span class="text-dashed">Пример<br>работоспособности<br>в несколько линий линии</span>

Answer 2

Используйте text-underline-position для Chrome

body{
  font-family: sans-serif;
}
a{
  color:inherit;
  text-decoration-style:dashed;
  text-underline-position: under; 
}

<p><a href="#">Закзать звонок</a></p>
<p><a href="#">asdas dasd asd asdasd <br> вторая строка</a></p>

БЛОГ НА HUSL

text-decoration-style: dashed; - криво отображается

Ответы (2 шт):