Как сделать text-decoration таким же тонким как в фигме?

@EvgenyAF · Регистрация: 21.12.2022

Author24 — интернет-сервис помощи студентам

Пытаюсь сделать text-decoration: underline для ссылок как по макету, но толщина в 1px существенно толще нужного результата. В фигме подчеркивание текста выглядит меньше 1px. Возможно ли сделать подчеркивание меньше 1px и как сделать также?

Для примера картинка во вложениях. Слева линия в макете, справа линия при толщине в 1px.

KingdaKa · 21.12.2022, 13:10

Это увеличенные картинки?

Тоньше 1 пикселя сделать нельзя, а вот поиграться с прозрачностью/цветом можно.

@rr33rr · 21.12.2022, 13:13

Сообщение от EvgenyAF

Пытаюсь сделать text-decoration: underline для ссылок как по макету, но толщина в 1px существенно толще нужного результата. В фигме подчеркивание текста выглядит меньше 1px. Возможно ли сделать подчеркивание меньше 1px и как сделать также?

Стандартное подчеркивание не 1px, а зависит от размера шрифта.

Чтобы установить толщину подчеркивания в 1px существуют разные способы:
* через css3 свойство text-decoration-thickness: 1px;
* через замену подчеркивания на нижнюю рамку border-bottom: 1px solid orange;
* через псевдоэлемент ::after
В 2х последних случаях стандартное подчеркивание убираем через text-decoration: none;

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!doctype html>
<html>
<head>
<style>
a{
  color: orange;
  font: normal 20px Verdana;
}
.decoration{
  text-decoration-thickness: 1px;
}
 
.border{
  text-decoration: none;
  border-bottom: 1px solid orange;
}
 
.after{
  text-decoration: none;
  display: inline-block;
}
.after::after{
  display: block;
  content:'';
  height: 1px;
  background: orange;
  margin-top: -3px;
}
</style>
</head>
<body>
<a href="">Удалить все фильтры</a>
<br>
<a href="" class="decoration">Удалить все фильтры</a>
<br>
<a href="" class="border">Удалить все фильтры</a>
<br>
<a href="" class="after">Удалить все фильтры</a>
</body>
</html>

Этот пример в песочнице: https://plnkr.co/edit/kU3Xphs5RB18T0D0?preview

KingdaKa · 21.12.2022, 13:25

Можно еще через box-shadow

@EvgenyAF · 21.12.2022, 13:27 **[ТС]**

Верное уточнение насчет стандартной толщины underline, благодарю. Пытался уже через text-decoration-thickness и border делать, но опять же 1px это слишком много. Заказчик упирается на то, что бы было как в макете.

Добавлено через 1 минуту
Благодарю за совет. Если есть ещё какой-то пример или ссылка на материал для изучения, то буду признателен

@rr33rr · 21.12.2022, 14:06

Сообщение от EvgenyAF

Пытался уже через text-decoration-thickness и border делать, но опять же 1px это слишком много. Заказчик упирается на то, что бы было как в макете.

Ваш код и макет покажите.

Сообщение от EvgenyAF

1px это слишком много

Как уже сказали выше, меньше 1px толщина линий не бывает.

Например, на ваших скриншотах на левой картинке толщина подчеркивания 2px, а на правой — 4px.
См первое приложенное изображение.

В моем примере стандартное подчеркивание — толщиной 2px, варианты с text-decoration-thickness, border и ::after — 1px.
См второе приложенное изображение.

На картинках специально изображение увеличено и нанесена сетка пикселей.

KingdaKa · 21.12.2022, 16:08

Сообщение от EvgenyAF

но опять же 1px это слишком много

В Фигме же можно посмотреть как в CSS интерпретируется шрифт и декорации.

Меньше пикселя как уже было сказано не бывает, там фокус в цвете и может быть антиалиасинге.

@AlexAmator · 25.12.2022, 11:41

Свойство border-bottom можно использовать. Как вариант.

Новые блоги и статьи Все статьи Все блоги /
Protobuf в Go и новый Opaque API golander 15.03.2025 Распределенные системы опираются на эффективные протоколы обмена данными — о чем вы, скорее всего, прекрасно знаете, если работаете с микросервисной архитектурой. Protocol Buffers (Protobuf) от. . .	Преобразование строк в C++: std::from_chars от C++17 до C++26 NullReferenced 15.03.2025 Конвертация строк в числа — задача, с которой сталкивается практически каждый C++ разработчик. Несмотря на кажущуюся простоту, эта операция таит множество подводных камней и неочевидных последствий. . .	Управление памятью в Java и новые сборщики мусора Javaican 15.03.2025 Эффективное управление памятью всегда было ахиллесовой пятой высоконагруженных Java-приложений. При разработке на Java мы обычно полагаемся на автоматическое управление памятью через сборщики мусора. . .	Angular или Svelte - что выбрать? Reangularity 15.03.2025 Во фронтенд-разработке Angular и Svelte представляют собой два совершенно разных подхода к решению схожих задач. Один — полноценный, мощный монолит с корпоративной поддержкой, другой — компактный,. . .	Spring Cloud микросервисы: обнаружение и отслеживание Javaican 15.03.2025 В разработке корпоративных приложений всё больше команд обращают внимание на микросервисную архитектуру. Но с этой архитектурой приходят и специфичные трудности: как сервисам находить друг друга в. . .
Запуск контейнера Docker в облаке Mr. Docker 15.03.2025 Что такое Docker-контейнер? Если коротко — это легковесный, автономный пакет, содержащий всё необходимое для запуска приложения: код, зависимости, библиотеки и конфигурации. Когда мы говорим о. . .	Осваиваем Kubernetes: Подробная шпаргалка Mr. Docker 15.03.2025 Kubernetes — это открытая платформа для автоматизации развертывания, масштабирования и управления контейнеризированными приложениями. Он был создан для решения проблем, с которыми сталкиваются. . .	Лучшие PHP REST API фреймворки Jason-Webb 15.03.2025 Современные PHP REST API фреймворки предлагают большой набор функциональности: от автоматической валидации данных и управления маршрутизацией до генерации документации и интеграции с различными. . .	Многопоточность в Java с Project Loom: виртуальные или обычные потоки Javaican 15.03.2025 Многопоточность всегда была одноим из основных элементов в разработке современного программного обеспечения. Она позволяет приложениям обрабатывать несколько задач одновременно, что критично для. . .	Что нового в Swift 6 и особенности миграции mobDevWorks 15.03.2025 Swift 6 — это новый крупный релиз языка программирования от Apple, анонсированный на WWDC 2024. Если вы следили за эволюцией Swift, то наверняка заметили, что многие значимые возможности, которые. . .

@EvgenyAF 0 / 0 / 0 Регистрация: 21.12.2022 Сообщений: 3
		1
	Как сделать text-decoration таким же тонким как в фигме? 21.12.2022, 12:11. Показов 433. Ответов 7 Метки css, figma, html (Все метки) Пытаюсь сделать text-decoration: underline для ссылок как по макету, но толщина в 1px существенно толще нужного результата. В фигме подчеркивание текста выглядит меньше 1px. Возможно ли сделать подчеркивание меньше 1px и как сделать также? Для примера картинка во вложениях. Слева линия в макете, справа линия при толщине в 1px. Миниатюры 0

KingdaKa 1306 / 781 / 190 Регистрация: 19.09.2020 Сообщений: 1,993
	21.12.2022, 13:10	2
	Это увеличенные картинки? Тоньше 1 пикселя сделать нельзя, а вот поиграться с прозрачностью/цветом можно. 0

KingdaKa 1306 / 781 / 190 Регистрация: 19.09.2020 Сообщений: 1,993
	21.12.2022, 13:25	4
	Можно еще через `box-shadow` 0

@EvgenyAF 0 / 0 / 0 Регистрация: 21.12.2022 Сообщений: 3
	21.12.2022, 13:27 [ТС]	5
	Верное уточнение насчет стандартной толщины underline, благодарю. Пытался уже через text-decoration-thickness и border делать, но опять же 1px это слишком много. Заказчик упирается на то, что бы было как в макете. Добавлено через 1 минуту Благодарю за совет. Если есть ещё какой-то пример или ссылка на материал для изучения, то буду признателен 0

@rr33rr 740 / 499 / 272 Регистрация: 07.11.2022 Сообщений: 806
	21.12.2022, 14:06	6
	Сообщение от EvgenyAF Пытался уже через text-decoration-thickness и border делать, но опять же 1px это слишком много. Заказчик упирается на то, что бы было как в макете. Ваш код и макет покажите. Сообщение от EvgenyAF 1px это слишком много Как уже сказали выше, меньше 1px толщина линий не бывает. Например, на ваших скриншотах на левой картинке толщина подчеркивания 2px, а на правой — 4px. См первое приложенное изображение. В моем примере стандартное подчеркивание — толщиной 2px, варианты с text-decoration-thickness, border и ::after — 1px. См второе приложенное изображение. На картинках специально изображение увеличено и нанесена сетка пикселей. Миниатюры 0

KingdaKa 1306 / 781 / 190 Регистрация: 19.09.2020 Сообщений: 1,993
	21.12.2022, 16:08	7
	Сообщение от EvgenyAF но опять же 1px это слишком много В Фигме же можно посмотреть как в CSS интерпретируется шрифт и декорации. Меньше пикселя как уже было сказано не бывает, там фокус в цвете и может быть антиалиасинге. 0

@AlexAmator 0 / 0 / 0 Регистрация: 25.12.2022 Сообщений: 6
	25.12.2022, 11:41	8
	Свойство border-bottom можно использовать. Как вариант. 0

Опции темы