Css подчеркивание: Нестандартное подчёркивание текста на чистом CSS. Свойство text-decoration — журнал «Доктайп»

css — Могу ли я сместить подчеркивание вправо и сократить длину?

Задавать вопрос

спросил 1 год, 2 месяца назад

Изменено 1 год, 2 месяца назад

Просмотрено 397 раз

Я пытаюсь добавить стилизованное подчеркивание к заголовку, который начинается сразу после буквы g. Смотрите изображение для того, что я имею в виду.

Я перепробовал все, что мог, и обыскал Интернет в поисках ответа, но пока безрезультатно.

Вот как это у меня сейчас

Вот как это должно быть

Вот что у меня есть на данный момент:

  
начинай мяукать
 
.App-заголовок h2 {
  цвет: #394CED;
  размер шрифта: 33px;
  вес шрифта: полужирный;
  оформление текста: подчеркивание;
  смещение подчеркивания текста: 2%;
  цвет оформления текста: #00D8D6;
  толщина оформления текста: 4px;
  text-decoration-skip-ink: нет;
  вес шрифта: 600;
  отступ снизу: 10 пикселей;
}
 

Я не могу просто изменить пропуск чернил, так как мне нужно, чтобы они проходили под буквой Y.

Вам может понадобиться обернуть весь текст внутри диапазона и примените к нему все текстовые украшения и отделите первую букву от этого диапазона следующим образом:

 span {
  оформление текста: подчеркивание;
  смещение подчеркивания текста: 2%;
  цвет оформления текста: #00D8D6;
  толщина оформления текста: 4px;
  text-decoration-skip-ink: нет;
  
}
h2{
  цвет: #394КЭД;
  размер шрифта: 33px;
  вес шрифта: полужирный;
  вес шрифта: 600;
  отступ снизу: 10 пикселей;
} 

  
g
давайте мяукать  

1

Это можно сделать с помощью псевдоэлемента. Вот пример, где подчеркивание позиционируется вручную.

 ч2 {
  цвет: #394CED;
  размер шрифта: 33px;
  вес шрифта: полужирный;
  /* украшение текста: подчеркивание;
  смещение подчеркивания текста: 2%;
  цвет оформления текста: #00D8D6;
  толщина оформления текста: 4px;
  text-decoration-skip-ink: нет; */
  вес шрифта: 600;
  отступ снизу: 10 пикселей;
  положение: родственник;
}
h2 :: после {
  содержание: "";
  высота: 4 пикселя;
  ширина: 230 пикселей;
  отображение: встроенный блок;
  цвет фона: #00D8D5;
  положение: абсолютное;
  верх: 32px;
  слева: 20 пикселей;
z-индекс: -1;
} 

  
начни мяу
  

Вы можете указать только первую букву с помощью CSS, чтобы включить пропуск рукописного ввода, добавив к существующему стилю:

 h2::first-letter {text-decoration -пропустить чернила: авто;}
 

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя адрес электронной почты и пароль

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Нажимая «Опубликовать свой ответ», вы соглашаетесь с нашими условиями обслуживания и подтверждаете, что прочитали и поняли нашу политику конфиденциальности и кодекс поведения.

Свойство CSS: text-underline-position: `выше` и `ниже`

Могу ли я использовать

Поиск ?

Свойство CSS: text-underline-position: `выше` и `ниже`

• Глобальное использование

  2,72% + 0% «=» 2,72%

ИЭ

1. 6–10: поддерживается
2. 11: поддерживается

Edge

1. 12–18: поддерживается
2. 79–113: не поддерживается
3. 114: не поддерживается

Firefox

1. 2–73: не поддерживается
2. 74–112: поддерживается
3. 113: поддерживается
4. 01% — Supported»> 114–115: поддерживается

Chrome

1. 4–113: не поддерживается
90 133 114: не поддерживается
2. 115–117: не поддерживается

Safari

1. 3.1–16.4: не поддерживается
2. 16.5: не поддерживается
3. 16.6–17: не поддерживается
4. TP: поддержка неизвестна

Opera 9009 5

1. 10–98: не поддерживается
2. 99: не поддерживается

Safari на iOS

1. 3.2–16.4: не поддерживается
2. 16.5: не поддерживается