Содержание

Нижнее подчёркивание html или все хитрости оформления текста

 

Приветствую всех, кто жаждет новых знаний и читает мой блог. Публикацию сегодняшнего дня я хочу посвятить весьма легкой теме, которая тем не менее регулярно вызывает ряд вопросов у новичков: «Как убрать или добавить нижнее подчеркивание html».

Насколько вы уже знаете, само нижнее подчеркивание можно задавать вручную, однако у ссылок они установлены по умолчанию. Именно поэтому в статье я напомню вам, как задавать подчеркивание заголовкам, расскажу, как устанавливать нижнюю линию на всю ширину блока, а также как бороться со стандартным форматированием ссылок. Ну что ж, начнем!

А давай-ка вот этим подчеркнем!

В языке html существуют специальный парный тег для подчеркивания текста: <u>слово</u>.

Однако профессиональные верстальщики пользуются механизмами стилевых каскадных таблиц, т.е. css, для оформления внешнего вида всего сайта. И это правильно. Такой подход разделяет разметку от стилизации, делает форматирование гибким и удобным. К тому же так легче отловить баги (ошибки) в коде.

Для подчеркивания текстового контента в основном используются такие свойства: border и text-decoration.

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

Данная единица языка достаточно гибкая, так как можно указать форматирование для отдельных сторон границы. Достигается это при помощи свойств:

  1. border- right (справа)
  2. border- top (сверху)
  3. border- left (слева)
  4. border- bottom (снизу)
Также при помощи border можно задать:
  • точечное (dotted)
  • пунктирное (dashed)
  • линейное (solid)
  • двойное (double)
  • объемное обрамление блокам (groove, inset, ridge и outset)

Не забывайте, что всегда можно повторить стилевые настройки блока-родителя при помощи ключевого слова inherit.

 

Теперь обсудим свойство языка css text-decoration. Данный элемент отвечает за дополнительные украшения текста.

К ним относятся:

  1. мигание (blink)
  2. линия над текстом (overline)
  3. зачеркнутые объекты (line-through)
  4. наследование стилизации (inherit)
  5. отмена всех дополнительных декораций (none)
  6. необходимое нам подчеркивание (underline)

Настало время практики

Теперь я хочу, чтоб вы закрепили полученные знания и практически опробовали приведенный мной пример программного кода. Для тех, кто знаком с данной темой, это также будет полезно. Как мы все знаем: «Повторение – мать учения!».

Данный код реализует видоизмененную стилизацию ссылок, а также устанавливает подчеркивание заголовка во всю ширину блока.

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

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Подчеркивание</title>
  <style>
   h2 {
   text-align:center;
   border-bottom:3px double green;
   padding-bottom: 4px;
   }
   .block {
    border: 5px groove green;
    padding: 40px;
    font-size:21px;
   }
   .one {
    text-decoration: none;
    border-bottom: 2px dashed green; 
     color: green;
   }
    .two {
    text-decoration: none;
    color: green;
    font-weight: 900;
   }
    a.two:hover, a.one:hover  {
    color: blue;
   }
  </style>
 </head> 
 <body>
   <h2>Озаглавим текст подчеркнутым названием</h2>
  <div>
    В этом блоке находится важный текст с некоторым описанием чего-то и ссылкой на первый ресурс с пунктирным подчеркиванием. Теперь мы опишем вторую ссылку, убрав стандартное подчеркивание и цвет.
   </div>
 </body>
</html>

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Подчеркивание</title> <style> h2 { text-align:center; border-bottom:3px double green; padding-bottom: 4px; } .block { border: 5px groove green; padding: 40px; font-size:21px; } .one { text-decoration: none; border-bottom: 2px dashed green; color: green; } .two { text-decoration: none; color: green; font-weight: 900; } a.two:hover, a.one:hover { color: blue; } </style> </head> <body> <h2>Озаглавим текст подчеркнутым названием</h2> <div> В этом блоке находится важный текст с некоторым описанием чего-то и ссылкой на первый ресурс с пунктирным подчеркиванием. Теперь мы опишем вторую ссылку, убрав стандартное подчеркивание и цвет. </div> </body> </html>

На этой ноте я заканчиваю обучающую публикацию. В ней рассмотрены все необходимые инструменты для подчеркивания текстового контента, зная которые вы можете создавать свои варианты оформления страниц веб-сайтов.

Еще интересную статью можете почитать про вертикальные линии, где я подробно рассказал про интересные моменты и некоторые секретные украшательства.

Не забывайте вступать в ряды моих подписчиков, ведь впереди еще множество интересных и полезных тем, а также делитесь ссылкой блога с друзьями. Пока-пока!

С уважением, Роман Чуешов

 

 

Загрузка…

Прочитано: 588 раз

Красивое css подчеркивание элементов

Наверняка вы замечали на многих ресурсах анимационное подчеркивание ссылок и хотели узнать, как это воплотить на своем сайте. Чтобы сделать красивое css подчеркивание элементов нам не понадобятся большие познания, либо подключение дополнительных скриптов, все, что нам нужно – это стандартный HTML и CSS.

Вариации подчеркивания

Подчеркивание ссылок или любых других элементов, можно придумать какое угодно. Подчеркивание может всплывать снизу, выезжать слева или справа и т.д. Мы рассмотрим более интересный пример, в котором подчеркивание будет разъезжаться от центра к краям, как на демонстрации ниже.

демонстрация подчеркивания

HTML

Для начала создадим какой либо элемент, к примеру, возьмем тег A. Атрибут его нам не важен, потому как большая часть работы будет отведена стилям.

<a href="#">demo ссылка</a>

CSS

Реализация будет заключаться в двух линиях, которые будут разъезжаться от середины нижней части элемента к его краям.

За подчеркивание у нас отвечает свойство text-decoration, но применять его здесь не имеет смысла, потому как воплотить наши планы по анимации в таком случае не совсем актуально. Не будем забывать, что каждому элементу можно присвоить псевдоэлемент ::before или ::after. Поэтому все свойства будем задавать именно им, а нашей ссылке сразу же задаем следующие параметры:

a{
   display: inline-block;
   position: relative;
   text-decoration: none;
}

Таким образом мы задали блочную обтекаемость и позиционирование относительно исходного места. Все это делается для того, чтобы подчеркивание не вылезало за пределы элемента, когда мы псевдоэлементу

::before назначим абсолютное позиционирование. После этого нам необходимо задать его четкое расположение и размер. И тут мы сразу же создаем первую половину подчеркивания.

a::before{
   display: block;
   position: absolute;
   content: "";
   height: 2px;
   width: 0;
   background-color: red;
   transition: width .5s ease-in-out, left .5s ease-in-out;
   left: 50%;
   bottom: 0;
}

Т.е. высота линии подчеркивания будет 2px, длина 0, красного цвета, а за анимацию отвечает свойство transition. Ну и конечно же, отступ слева на 50%, т.е. центральная точка. Практически те же действия производим и с псевдоэлементом

::after:

a::after{
   display: block;
   position: absolute;
   content: "";
   height: 2px;
   width: 0;
   background-color: red;
   transition: width .5s ease-in-out;
   left: 50%;
   bottom: 0;
}

Дальше нам остается только добавить эффект при наведении мышки на ссылку.

a:hover::before{
   width: 50%;
   left: 0;
}
a:hover::after{
   width: 50%;
}

Стоит отметить, что это лишь один из способов реализации данной идеи. Можно то же самое сделать и при помощи только одного псевдоэлемента ::before. Подписывайтесь на материалы и предлагайте темы для статей.

  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
(17 голосов, в среднем: 4.9 из 5)
не скупись ставь лайк Подписка на обновления:

Подчеркнутый текст силами HTML и CSS

Серёжа Сыроежкин

Серёжа СыроежкинКопирайтер

Подчеркнутый текст в HTML выделяется с помощью тега u HTML (от слова underline). Применяется он следующим образом (нужная часть текста помещается между тегами <u></u>):

Конструктор сайтов <u>"Нубекс"</u>

Но данный код считается невалидным, поэтому значительно эффективнее и правильнее использовать CSS-стили для декорации текста.

Подчеркнуть текст — CSS

Как мы уже говорили в статье Зачеркнутый текст, декорации текста задаются при помощи свойства text-decoration. Подчеркнутый текст задается параметром underline:

<!DOCTYPE html>
<html>
 <head>
    <title>Подчеркнутый текст с помощью CSS - "Нубекс"</title>
	<meta charset="utf-8">
	<style>
	   .underline {
	   text-decoration: underline;
	   }
	</style>
 </head>
  <body>
	 <p>Конструктор сайтов <span>Нубекс"</span></p>
  </body>
</html>

Подчеркнуть текст с помощью CSS можно не только сплошной линией. Посмотрим, какими вариантами можно подчеркнуть текст:

  • Подчеркнуть текст пунктиром CSS: 
    <!DOCTYPE html>
<html>
 <head>
    <title>Подчеркнутый пунктиром текст - "Нубекс"</title>
	<meta charset="utf-8">
	<style>
	   .dashed {
	   border-bottom: 1px dashed blue;
	   }
	</style>
 </head>
  <body>
	 <p>Конструктор сайтов <span>Нубекс"</span></p>
  </body>
</html>
  • Подчеркивание точками:
    <!DOCTYPE html>
<html>
 <head>
    <title>Подчеркнутый точками текст - "Нубекс"</title>
	<meta charset="utf-8">
	<style>
	   .dotted {
	   border-bottom: 2px dotted blue;
	   }
	</style>
 </head>
  <body>
	 <p>Конструктор сайтов <span>Нубекс"</span></p>
  </body>
</html>
  • Двойная черта: 
    <!DOCTYPE html>
<html>
 <head>
    <title>Подчеркнутый двумя линиями текст - "Нубекс"</title>
	<meta charset="utf-8">
	<style>
	   .double {
	   border-bottom: double blue;
	   }
	</style>
 </head>
  <body>
	 <p>Конструктор сайтов <span>Нубекс"</span></p>
  </body>
</html>

Как видно из приведенных примеров, управлять стилем подчеркивания можно при помощи свойства border-bottom (нижняя граница). С помощью этого параметра можно задать тип подчеркивания, цвет, толщину.

Смотрите также:

Подчеркивание элементов на CSS — Полезное

Давно хотелось поделиться своим опытом в вёрстке с другими специалистами и сегодня решили опубликовать свой первый пост о небольшой «фишке»: подчеркивание элементов на CSS. Многие из нас видели такой эффект, как появление полосы под каким-либо элементом. Причем полоса плавно появляется либо от края, либо от центра и подчеркивает весь элемент.

Хотим заметить, что это не значение border в CSS, а несколько другое значение, при использовании которого не потребуется использование скриптов или flash. Итак, давайте начнем.

Варианты подчёркивания

На самом деле, вариантов может быть множество – всё зависит от вашей фантазии. Мы вам покажем три разных варианта: появление полосы слева, от центра и справа.

Пример 1: подчёркивание слева

HTML

Для начала давайте создадим элемент. Например, тег a, который является ссылкой.

<a href="#">текст ссылки</a>
CSS

Обычно подчеркивание определяется значением text-decoration, но анимация в этом случае не будет работать. В данном случае мы его опустим и присвоим псевдоэлемент :before, с помощью которого мы и сделаем анимированное появление подчёркивания.

a {
    display: inline-block;
    position: relative;
    text-decoration: none;
}

Данному элементу мы задали блочное обтекание, что не позволит подчёркиванию выйти за пределы границ элемента и позволит разместить тег в любом месте внутри какого-либо блока. Далее перейдём к псевдоэлементу :before.

a:before {
    display: block;
    position: absolute;
    content: "";
    height: 2px;
    width: 0;
    background: #ec4444;
    transition: width 0.3s ease-in-out;
    left: 0;
    bottom: 0;
}

Мы задали абсолютное позиционирование псевдоэлементу для того, чтобы подчёркивание было внутри тега и не выходило за его пределы. Высота полосы будет составлять 2 пиксела, длина будет равна 0, цвет красный, а значение transition отвечает за анимацию. Теперь остается добавить эффект при наведении.

a:hover:before {
    width: 40%;
}

Таким образом мы задали значение длины в 40% от всей длины элемента. По аналогии расскажу и про другие примеры, где мы будем использовать еще один псевдоэлемент.

Пример 2: подчёркивание от центра

HTML

Оставим тот же тег.

<a href="#">текст ссылки</a>
CSS
a {
    display: inline-block;
    position: relative;
    text-decoration: none;
}
a:before {
    display: block;
    position: absolute;
    content: "";
    height: 2px;
    width: 0;
    background: #ec4444;
    transition: width 0.3s ease-in-out, left 0.3s ease-in-out;
    left: 50%;
    bottom: 0;
}
a:after {
    display: block;
    position: absolute;
    content: "";
    height: 2px;
    width: 0;
    background-color: #ec4444;
    transition: width 0.3s ease-in-out;
    left: 50%;
    bottom: 0;
}

Здесь мы добавили псевдоэлемент :after, указали позиционирование слева 50% и добавили анимацию для того, чтобы появление было плавным. Данное значение размещает полосы строго по середине.

a:hover:before {
    width: 50%;
    left: 0;
}
a:hover:after {
    width: 50%;
}

При наведении нам нужно, чтобы подчеркивание шло от центра к краям элемента. Таким образом, пвседоэлементу :before мы задали позиционирование слева равным 0, что сделает появление подчёркивания к левому краю.

Пример 3: подчёркивание справа

HTML
<a href="#">текст ссылки</a>
CSS
a {
    display: inline-block;
    position: relative;
    text-decoration: none;
}
a:after {
    display: block;
    position: absolute;
    content: "";
    height: 2px;
    width: 0;
    background: #ec4444;
    transition: width 0.3s ease-in-out;
    right: 0;
    bottom: 0;
}
a:hover:after {
    width: 40%;
}

Таким образом, мы получили появление подчёркивания справа.

Как сделать подчеркнутый (сверху или снизу) и зачеркнутый текст «ВКонтакте»?

Форматирование (изменение внешнего вида) текста помогает во многом лучше воспринимать информацию. Так, например, «мохнатый» текст во ВКонтакте, который мы рассмотрели в одной из наших статей, больше является забавой, нежели полезным инструментом в этом деле. Когда как подчеркивание и зачеркивание текста вполне поможет вам сделать акцент на определенном слове или фразе в вашем тексте.

Зачеркнутый текст во ВКонтакте

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

&#0822;

Его вы вставляете перед каждой буквой в слове и в конце. Пример:

&#0822;p&#0822;a&#0822;n&#0822;d&#0822;o&#0822;g&#0822;e&#0822;.&#0822;c&#0822;o&#0822;m&#0822;

Результат вышеприведенного кода:

Как сделать подчеркнутый (сверху или снизу) и зачеркнутый текст «ВКонтакте»?

Все очень просто.

Подчеркнутый текст во ВКонтакте

Что касается подчеркнутого текста, Контакт поддерживает аж три их вида. Поэтому о каждом немного подробнее.

1. Пунктирное нижнее подчеркивание. Используется символ:

¯

Который, в отличие от других методов, вы вставляете после вашей фразы столько раз, сколько ширины занимает ваша фраза.

Пример:

www.pandoge.com
¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯

И, соответственно, результат вышеприведенного кода:

Как сделать подчеркнутый (сверху или снизу) и зачеркнутый текст «ВКонтакте»?

2. Верхнее пунктирное подчеркивание. Да, бывают случаи, когда вам нужно подчеркнуть текст не снизу, а, например, сверху.

В таком случае вы используете код:

&#773;

Принцип работы такой же, как и в остальных вариантах – перед каждым символом и в конце, например:

&#773;w&#773;w&#773;w&#773;.&#773;p&#773;a&#773;n&#773;d&#773;o&#773;g&#773;e&#773;.&#773;c&#773;o&#773;m&#773;

И пример того, как это выглядит в самом ВКонтакте:

Как сделать подчеркнутый (сверху или снизу) и зачеркнутый текст «ВКонтакте»?

3. Верхнее волнистое подчеркивание. Еще один вид верхнего подчеркивания ВКонтакте – это волнистая линия.

Код использования:

&#864;

Его вставляете также перед каждым символом. Пример:

&#864;w&#864;w&#864;w&#864;.&#864;p&#864;a&#864;n&#864;d&#864;o&#864;g&#864;e&#864;.&#864;c&#864;o&#864;m

И, как всегда, результат:

Как сделать подчеркнутый (сверху или снизу) и зачеркнутый текст «ВКонтакте»?

Если что-то вам показалось непонятным или вы знаете еще один или несколько вариантов подчеркивания слов в этой социальной сети – пишите об этом в комментариях, улучшим материал вместе.

Подчеркивание текста или пробелов — Word

Подчеркивание слов и пробелов между ними

Самый быстрый способ подчеркнуть текст — нажать клавиши CTRL + ВВОД. Если вы хотите остановить подчеркивание, снова нажмите клавиши CTRL + U.

Кроме того, можно подчеркивание текста и пробелов несколькими другими способами.

  1. Выделите текст, который вы хотите подчеркнуть.

  2. Переход на домашнюю > Подчеркнутый. Или нажмите клавиши CTRL + U.

    Нажмите кнопку "подчеркнутый"

Подчеркивание пробелов

Вы можете подчеркивание пустых пробелов с помощью клавиш Shift + дефис (-), но при создании заполненной формы, например, трудно выровнять подчеркивания. Кроме того, если параметр Автоформат для замены знаков подчеркивания на линии границы включен, при нажатии клавиш Shift + дефис (-) три или более значений в строке будет отображаться ширина абзаца, и это может быть не так, как вам нужно.

Лучше всего подчеркивание пустых областей для печатного документа — использование клавиши TAB для применения подчеркивания к символам табуляции.

Если вы хотите создать подчеркивание в интерактивной форме, вставьте ячейки таблицы с включенной нижней границей.

Подчеркивание пустых областей для печатного документа

Чтобы подчеркивание пустых областей для печатного документа, используйте клавишу TAB и примените форматирование подчеркивания к символам табуляции.

  1. Перейдите на вкладку главная > Показать или скрыть знаки ¶ , чтобы можно было видеть метки, указывающие на пробелы и позиции табуляции.

  2. Вновь нажмите клавишу TAB.

  3. Выделите знаки табуляции, которые нужно подчеркнуть. Знак табуляции похож на маленькую стрелку.

    TAB

  4. Выполните одно из указанных ниже действий.

    • Нажмите клавиши CTRL + ВВОД, чтобы применить простое подчеркивание.

    • Чтобы применить другой стиль подчеркивания, перейдите на вкладку Главная и нажмите кнопку вызова диалогового окна » Шрифт » Изображение кнопки .

      Выберите стиль подчеркивание , чтобы выбрать другой стиль подчеркивания.

Подчеркивание пустых областей для документа в Интернете

Чтобы создать подчеркивание в документе или форме в Интернете, вставьте ячейку с включенной нижней границей. Этот метод гарантирует, что при вводе на строке строки она останется на своем своем расположении.

  1. Щелкните или коснитесь того места, куда вы хотите вставить пустое подчеркивание.

  2. Перейдите к разделу вставка > таблице.

    Вставка таблицы

  3. Чтобы вставить таблицу 1×1, выберите верхний левый прямоугольник.

    Если вы хотите добавить вступительный текст (например, имя или номер социального страхования) перед подчеркиванием, вставьте таблицу 2×1.

    Чтобы изменить длину линии, наведите указатель на конец таблицы, чтобы он превратился в указатель изменения размера Указатель изменения размера (двунаправленная стрелка) , а затем щелкните стрелку вправо или влево, чтобы удлинить или укоротить ее.

  4. Щелкните или нажмите в таблице (или во второй ячейке таблицы, если вы создали таблицу 2×1).

  5. Откроется окно Работа с таблицами . На вкладке конструктор выберите пункт границы > границы и заливка.

  6. В разделе Параметрывыберите пункт нет.

  7. В разделе стильвыберите нужный тип, цвет и ширину линии.

  8. В области Предварительный просмотрна диаграмме щелкните или коснитесь между нижними маркерами полей, чтобы добавить нижнюю границу. Убедитесь, что отображается только нижняя линия.

    Примечание: Если вы хотите просмотреть таблицу без светло-серой сетки, которая не печатается, выберите ее, а затем перейдите к макету рядом с вкладкой конструктор таблиц и нажмите кнопку вид линии сетки.

    Если вы использовали 2×1 таблицу, чтобы освободить место для ввода текста, можно ввести текст перед строкой.

Удаление подчеркивания

Чтобы удалить одинарную подчеркивание из слов и пробелов, выделите подчеркнутый текст и нажмите клавиши CTRL + U.

Чтобы удалить другие стили подчеркивания, дважды нажмите клавиши CTRL + U.

Шрифты для инстаграм на русском онлайн

Введите текст в поле ниже, а потом кликните на понравившийся шрифт, чтобы скопировать его! Потом вставьте его в пост Инстаграм!

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. Жирный курсив
41. Жирный курсив с засечками
42. Тонкий шрифт
43. Греческий шрифт
44. Греческий шрифт 2
45. Стилизованный
46. Стилизованный и перечеркнутый
47. Китайский шрифт
48. Японский шрифт
49. Уменьшенный надстрочный
50. Изогнутый 3
51. Изогнутый 4
52. Изогнутый 5
53. Азиатский шрифт
54. LOVE
55. С иероглифами
56. Стилизованый со звездами
57. FUTURE
58. Wingdings
59. Прописной со смайлами
60.Прописной со смайлами 2
61. Прописной со смайлами 3
62. Прописной со смайлами 4
63. Прописной со смайлами 5
64. Случайный шрифт
65. Случайный шрифт 2
66. Случайный шрифт 3
67. Случайный шрифт 4
68. Случайный шрифт 5

71 Текстовые эффекты CSS

Collection of free HTML and CSS text effect code examples: background, hover, rotating, typing, etc. Update of April 2019 collection. 21 new items.

Коллекция бесплатных HTML и CSS текстовых эффектов примеров кода. Обновление апрельской коллекции 2019 года. 21 новинка.

  1. Эффекты тени текста CSS
  2. CSS эффекты свечения текста
  3. CSS 3D текстовые эффекты
  4. Текстовые анимации CSS
  5. Эффекты сбоя текста CSS
  6. Текстовые эффекты JavaScript
Demo image: Split Text with clip-path
Автор
  • Håvard Brynjulfsen
О коде

Разделить текст с отсечкой

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

Demo image: 3D Letters Sugar Sweet
Автор
  • Håvard Brynjulfsen
О коде

3D буквы Sugar Sweet

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

Demo image: CSS in CSS with a lot of C and S
Автор
  • Джулия Кардиери
О коде

CSS в CSS с большим количеством C и S

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

Demo image: writing-mode
О коде

режим записи

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

Автор
  • Марван Зибауи
О коде

Подчеркнуть Анимация при наведении клипа

Замечательное анимированное подчеркивание с использованием обрезки текста.Текст использует background-clip: text и linear-gradient background, чтобы быть двухцветным. Мы обходим анимацию градиента, вместо этого анимируя background-position . Мы должны использовать элемент оболочки для выделения подчеркивания под текстом, поскольку цвет текста уже является фоном!

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

Demo image: CSS Arcade Typography: Snow Bros. (1990)
Автор
  • Линн Фишер
Сделано с
  • HTML (Мопс) / CSS (Стилус)
О коде

CSS Arcade Типография: Snow Bros.(1990)

Неровной шрифт из аркадной игры Snow Bros. Drawn in CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

Demo image: Twenty Twenty & Multi-Color Gradients
Автор
  • Лина Лаванья
О коде

Двадцать двадцать и многоцветные градиенты

Многоцветные градиенты, обрезанные с помощью CSS, смешанные с SVG feGaussianBlur .

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

Demo image: Layered text-shadow Effect CSS
Автор
  • Ширин Тадж
О коде

Эффект слоистого текста и тени CSS

text-shadow — это забавный небольшой стиль CSS, который может превратить любой простой текст в красивое произведение искусства.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

Demo image: Typo Triple
О коде

Тройная опечатка

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

О коде

Многострочный текст жирное подчеркивание при наведении курсора

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

Demo image: SAVE
Автор
  • Себастьян Опперман
О коде

СОХРАНИТЬ

Причудливый баннер CSS с использованием box-shadow s.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

Автор
  • Бенджамин Солум
О коде

Многострочное усечение в чистом CSS

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

Автор
  • Адам Дипинто
О коде

Скользящая перспектива

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

Автор
  • Ион Эмиль Негоита
О коде

Текстовые эффекты шрифтов 80-х годов 4: Текст в киберпространстве

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

Автор
  • Стас Мельников
О коде

Эффекты многострочного анимированного подчеркивания текста

Многострочные анимированные эффекты подчеркивания текста с простой настройкой.Настройки анимации реализованы с помощью настраиваемых свойств CSS, поэтому вы можете изменять значения прямо в браузере.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

Demo image: Custom Multiline Text Underline with Rounded Caps
О коде

Пользовательское подчеркивание многострочного текста с закругленными заглавными буквами

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

Demo image: Western Electric Big Button Phone
О коде

Western Electric большой кнопочный телефон

Воссоздание телефона Western Electric Big Button 1970-х годов.Воссоздано с использованием гибкого блока, сетки, теней и обводок текста. Эта ручка столкнулась с несколькими причудами CSS. Во-первых, установка border-radius и overflow: hidden нарушает сглаживание на border-radius , оставляя неровный вид. Это было немного поработано, добавив очень мягкий свет box-shadow на стороне, имеющей радиус границы . Это несколько снимает проблему. Во-вторых, text-stroke все еще грубо реализован в браузерах.Все штрихи текста рисуются снаружи глифа, что меняет форму глифа. Кроме того, размер теней текста изменяется с учетом внутренней части глифа и в конечном итоге становится меньше. Чтобы обойти это, я увеличил размер text-stroke , а затем попытался расположить каждый глиф так, чтобы обводка немного выходила за пределы контейнера и была обрезана. Это дает более гладкий вид, но неточный и убирает некоторые символы.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

Автор
  • Мэнди Майкл
О коде

Зачеркивание многострочного текста

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

Demo image: Outline Text Effect
Автор
  • Джейми Хэммонд
О коде

Эффект контурного текста

Эффект простого контура текста с использованием базового CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

Demo image: Back in Black
Автор
  • Дэвид Лилло
О коде

Назад в черном

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

Demo image: Neon Light Text
Автор
  • Сара Фоссхайм
О коде

Текст неонового света

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

Demo image: Text In A Circle
Автор
  • Мишель Баркер
О коде

Текст по кругу

Текст в кружке с переменными CSS.

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

Demo image: SVG Text Underline
Автор
  • Эндрю Спенсер
О коде

Подчеркнутый текст SVG

Используйте SVG для выделения отдельного слова в блоке текста. Размер SVG будет изменяться, чтобы соответствовать слову, а для обработки семантики используется тег.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

О коде

Анимированный текст в виде больших двоичных объектов

Анимированный текст в виде больших двоичных объектов с использованием только CSS.

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

Автор
  • Адам Кун
О коде

Оставайся позитивным: текстовый эффект

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

Demo image: Multiline Background Gradient
Автор
  • Маттиас Отт
О коде

Многострочный фоновый градиент

Многострочный фоновый градиент с смешанным режимом .

Совместимые браузеры: Chrome, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

О коде

Фоновый зажим CSS

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

Автор
  • Бен Сабо
О коде

ДЕКОНСТРУКЦИЯ

Совместимые браузеры: Chrome, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

О коде

Всплывающий текст с тенью фонового изображения

Вырезание текста из фона с последующим его «всплыванием» аналогично тому, как можно использовать тень от текста.Фактически, здесь используется тень текста!

Совместимые браузеры: Chrome, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

Автор
  • Андрес Санчес
О коде

Отображение текста CSS

Простое отображение текста с помощью CSS с использованием псевдоэлементов.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

Автор
  • Юсуке Накая
О коде

Только CSS: градиент слайсера

Пожалуйста, введите ваше любимое слово и измените размер шрифта, который вам нравится!

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

Автор
  • Ашиш Ананд
О коде

Классный 3D-текст

Классный трехмерный текст с состоянием наведения только на CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

Автор
  • Парк Джорджа У.
О коде

Эффект преломленного плавающего текста

Этот пример показывает, как чистый CSS можно использовать для создания анимированного эффекта преломленного плавающего текста.

Совместимые браузеры: Chrome, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

Автор
  • Эрин Э. Салливан
О коде

Анимированная тень текста

Забавная CSS-анимация, которая создает отскок, имитируя разделение RGB во время процесса.

Совместимые браузеры: Chrome, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

О коде

SVG / Анимация обводки

Анимированная цитата дня 🙂 «Делай что-нибудь творческое каждый день» с анимацией штрихов.

Совместимые браузеры: Chrome, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

О коде

Эффект подчеркивания

Эффект анимированного подчеркивания на чистом CSS на нескольких строках.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

Автор
  • Майк Голус
О коде

CSS Переход с липкого текста

Очень простой и универсальный эффект морфинга текста с парой редактируемых параметров.

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

О коде

Мерцающий неоновый текст

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

Demo image: Text Stroke + Offset Shadow
О коде

Обводка текста + смещение тени

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

О коде

Перекос текста при наведении курсора

Перекос текста при наведении курсора в HTML и CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

Автор
  • Кристофер Уоллис
О коде

Megaman ГОТОВ!

Воспроизведение знаменитого «READY» из игр Megaman без использования JavaScript. При этом широко используются CSS Grid и переменные css для определения времени.

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

Автор
  • Мэнди Майкл
О коде

Анимация полосатого текста

Анимация полосатого текста с фоновым клипом и градиентами.

Совместимые браузеры: Chrome, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

Demo image: Letters Effect
Автор
  • Стефано Перелли
Сделано с
  • HTML
  • CSS
  • JavaScript (jquery.js)
О коде

Эффект букв

Эффект букв на свитке.

Demo image: Fun Text
Автор
  • Себастьян ДеРосси
Сделано с
  • HTML
  • CSS
  • JavaScript (createjs.js)
О коде

Забавный текст

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

Demo image: Text Line Animation
Автор
  • Джон Хили
Сделано с
  • HTML
  • CSS / МЕНЬШЕ
  • JavaScript (tweenmax.js)
О коде

Анимация текстовой строки

Хорошая анимация текстовых строк с помощью TweenMax.js.

Автор
  • Натан Тейлор
О коде

Всплывающий текст

Всплывающий текст на чистом CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

Demo image: Silent Movie Text Effect
Автор
  • Димитра Василопулу
О коде

Текстовый эффект для немого кино

Текстовый эффект фильма с холстом .

Demo image: SVG Text Animation
Автор
  • Кэсси Эванс
Сделано с
  • HTML
  • CSS
  • JavaScript (аниме.js)
О коде

Анимация текста SVG

Хорошая текстовая анимация SVG.

Demo image: Text Reveal Animation
Автор
  • Артур Седлуха
Сделано с
  • HTML / Мопс
  • CSS / SCSS
  • JavaScript (tweenmax.js)
О коде

Анимация отображения текста

Анимация отображения текста GSAP.

Demo Image: Onion Skinning Text Morphing Демонстрационное изображение: морфинг текста со снятием шкуры с лука

Морфинг текста со снятия шкур лука

Морфинг текста со скинами лука в HTML / CSS / JS.
Сделано Джоном Хили
14 июня 2017 г.

Demo Image: Shaded Text Демо-изображение: закрашенный текст

Закрашенный текст

Закрашенный текст, эксперимент SVG + CSS3 с анимированными тенями. Он не оптимизирован для мобильных устройств… пока.
Сделано Рафаэлем Гонсалесом
16 сентября 2016 г.

Demo Image: Second Shadow Демо-изображение: Вторая тень

Вторая тень

Стилизация текста с помощью SVG.
Сделано в Code School
21 апреля 2016 г.

Demo Image: Squiggly Text Демо-изображение: волнистый текст

Волнистый текст

Эксперимент с волнистым текстом с фильтрами SVG.
Сделано Лукасом Беббером
22 октября 2015 г.

О коде

Пылающий огонь

Анимированные текстовые эффекты с использованием CSS3 text-shadow для придания заголовкам текста пламени.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

Demo image: Spring Text Hover Effect
Автор
  • Натан Тайло
О коде

Spring Text Hover Effect

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

Demo image: Simple CSS Hover Effect Using Sass Loops
Автор
  • Чарли Маркотт
О коде

Простой эффект наведения CSS с использованием циклов Sass

Простая небольшая анимация наведения. С помощью циклов Sass очень легко сделать потрясающие задержки анимации … вы можете извлечь из них много полезного.

Demo image: Animated Underlines
Автор
  • Рагнар Тор Валгейрссон
О коде

Анимированные подчеркивания

Демонстрация анимированного эффекта подчеркивания.Чистая CSS-анимация.

Demo Image: CSS Perspective Text Hover Демонстрационное изображение: наведение текста в перспективе CSS

CSS Перспектива наведения текста

Эксперимент с использованием веб-шрифтов в сочетании с инструментами преобразования CSS 3D.
Сделано Джеймсом Босвортом
22 августа 2016 г.

Demo Image: Animated Highlighted Text Демонстрационное изображение: анимированный выделенный текст

Анимированный выделенный текст

Идея проста, в ней используются линейный градиент и переход.
Сделано Рианом Арионой
19 февраля 2015 г.

Demo Image: Happy Text Демо-изображение: Счастливый текст

Счастливый текст

HTML и CSS эффект счастливого текста.
Сделано Беннеттом Фили
6 декабря 2014 г.

Demo Image: Peeled Text Transforms Демонстрационное изображение: преобразование очищенного текста

Преобразование очищенного текста

Это перо показывает текст, который выглядит так, как будто он оторван от страницы. У него плавная анимация при наведении.
Сделано Michiel Bijl
25 ноября 2014 г.

Demo Image: Typography Text Neon Демо-изображение: Типографский текст Неон

Типографский текст Neon

Текстовый дизайн (типографика) с неоновым эффектом.
Сделано Прима Утама Априансях
6 марта 2014 г.

Demo Image: Vertically Rotating Text Демонстрационное изображение: вертикально вращающийся текст

Вертикально вращающийся текст

Вертикально вращающийся текст с HTML и CSS.
Сделано Иаковом
23 июля 2014 г.

Demo image: CSS Attempts at Text with Inline Skewed Background
Автор
  • Отметка прилипания
О коде

Попытки CSS для текста со встроенным перекошенным фоном

Использование skew отображается только в том случае, если элемент — display: block или inline-block . Некоторые из них выглядят одинаково в широком окне просмотра, но не работают по-другому, поскольку ширина окна просмотра уменьшается.

Demo image: Moving Cloud Text
Автор
  • Кэмерон Фицуильям
О коде

Текст движущегося облака

Перемещение текста в облаке с HTML и CSS.

Demo image: Gooey Text Background With SVG Filters
Автор
  • Инес Монтани
О коде

Клейкий текстовый фон с фильтрами SVG

Пример использования липкого фильтра SVG для создания гладких краев вокруг встроенного текста с фоном.

Demo image: Text With Video Background
Автор
  • Даниэль Ющик
О коде

Текст с видео-фоном

Эта демонстрация исследует создание выделенного текста / контуров в SVG и зацикливание видео YouTube в качестве заливки.

Demo image: Text Background
О коде

Фон текста

Обрезка фона текста.

Demo Image: SVG Text: Animated Typing Демонстрационное изображение: SVG-текст: анимированный ввод

SVG-текст: анимированный набор текста

Анимированная типизация HTML, CSS и SVG.
Сделано Тиффани Рэйсайд
12 февраля 2015 г.

.

text-decoration — Веб-технологии для разработчиков

Сокращенное свойство CSS text-decoration устанавливает внешний вид декоративных линий в тексте. Это сокращение для text-decoration-line , text-decoration-color , text-decoration-style и более нового свойства text-decoration-Thickness .

Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, клонируйте https: // github.com / mdn / interactive-examples и отправьте нам запрос на перенос.

Текстовые украшения рисуются на дочерних текстовых элементах. Это означает, что если элемент задает украшение текста, то дочерний элемент не может удалить украшение. Например, в разметке

Этот текст содержит несколько выделенных слов .

, правило стиля p {text-decoration: underline; } приведет к подчеркиванию всего абзаца. Правило стиля em {украшение текста: нет; } не вызовет никаких изменений; весь абзац по-прежнему будет подчеркнут.Однако правило em {text-decoration: overline; } приведет к появлению второго украшения на «некоторых подчеркнутых словах».

Составляющие объекты

Это свойство является сокращением для следующих свойств CSS:

Синтаксис

Свойство text-decoration задается как одно или несколько значений, разделенных пробелами, представляющих различные свойства longhand text-decoration.

Значения

текст-украшение-строка
Устанавливает тип используемого оформления, например подчеркивание или сквозное .
текст-украшение-цвет
Задает цвет украшения.
стиль оформления текста
Задает стиль линии, используемой для украшения, например сплошной , волнистой или пунктирной .
толщина декорирования текста
Задает толщину линии, используемой для украшения.

Формальное определение

Формальный синтаксис 

 <'text-decoration-line'> || <'text-decoration-style'> || <'text-decoration-color'> || <'толщина-украшение-текста'>

Примеры 

.под {
оформление текста: подчеркивание красным;
}

.над {
текст-оформление: волнистый контур лайм;
}

.линия {
оформление текста: сквозное;
}

.plain {
текстовое оформление: нет;
}

.под более {
оформление текста: пунктирное подчеркивание над чертой;
}

.thick {
  оформление текста: сплошное подчеркивание фиолетовым цветом 4px;
}

.blink {
  текст-украшение: мигать;
}
 
 
 Под этим текстом есть линия. 


 Над этим текстом есть линия. 


 В этом тексте проходит линия.


 Эта  ссылка не будет подчеркнута ,
    поскольку ссылки вообще есть по умолчанию. Будьте осторожны при снятии
    оформление текста на якорях, поскольку пользователи часто зависят от
    подчеркивание для обозначения гиперссылок. 


 У этого текста есть строки над  и  под ним. 


 Этот текст имеет очень толстое фиолетовое подчеркивание в поддерживающих браузерах. 


 Этот текст может мигать для вас,
    в зависимости от используемого вами браузера.

Технические характеристики

Совместимость с браузером

Обновите данные о совместимости на GitHub
Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome для Android Firefox для Android Opera для Android Safari на iOS Samsung Internet
текстовое оформление Chrome Полная поддержка 1 Край Полная поддержка 12 Firefox Полная поддержка 1 IE Полная поддержка 3 Опера Полная поддержка 3.5 Safari Полная поддержка 1 WebView Android Полная поддержка ≤37 Chrome Android Полная поддержка 18 Firefox Android Полная поддержка 4 Опера Android Полная поддержка 10.1 Safari iOS Полная поддержка 1 Samsung Internet Android Полная поддержка 1.0
мигает Хром Нет поддержки Нет Кромка Нет поддержки № Firefox Нет поддержки 1-23 IE Нет поддержки № Opera Нет поддержки 4–15 Safari Нет поддержки № WebView Android Нет поддержки № Chrome Android Нет поддержки № Firefox Android Нет поддержки 4–23 Opera Android Нет поддержки 10.1–14 Safari iOS Нет поддержки № Samsung Internet Android Нет поддержки №
Сокращение Хром Полная поддержка 57 Кромка Полная поддержка 79 Firefox Полная поддержка 36
Полная поддержка 36
Частичная поддержка 6
 IE Нет поддержки № Opera Полная поддержка 44 Safari Полная поддержка 8
Полная поддержка 8
С префиксом Реализовано с префиксом поставщика: -webkit-
 WebView Android Полная поддержка 57 Chrome Android Полная поддержка 57 Firefox Android Полная поддержка 36
Полная поддержка 36
Частичная поддержка 6
 Opera Android Полная поддержка 43 Safari iOS Полная поддержка 8
Полная поддержка 8
С префиксом Реализовано с префиксом поставщика: -webkit-
 Samsung Internet Android Полная поддержка 7.0
толщина текстового украшения в сокращенном виде Хром Нет поддержки Нет Кромка Нет поддержки № Firefox Полная поддержка 70 IE Нет поддержки № Opera Нет поддержки № Safari Нет поддержки № WebView Android Нет поддержки № Chrome Android Нет поддержки № Firefox Android Нет поддержки № Opera Android Нет поддержки № Safari iOS Нет поддержки № Samsung Internet Android Нет поддержки №

Обозначение

Полная поддержка
Полная поддержка
Нет поддержки
Нет поддержки
Экспериментально.Ожидайте, что поведение изменится в будущем.
Экспериментальная. Ожидайте, что поведение изменится в будущем.
Нестандартный. Ожидайте плохой кроссбраузерной поддержки.
Нестандартный. Ожидайте плохой кроссбраузерной поддержки.
Устарело. Не для использования на новых сайтах.
Устарело. Не для использования на новых сайтах.
Для использования требуется префикс поставщика или другое имя.
Для использования требуется префикс поставщика или другое имя.

См. Также

.

Оформление текста — Tailwind CSS

Подчеркнутый

Используйте утилиту .underline для подчеркивания текста.

Быстрая коричневая лисица перепрыгнула через ленивую собаку.

  
 Быстрая коричневая лиса ...

Сквозная линия

Используйте утилиту . Сквозная линия , чтобы зачеркнуть текст.

Быстрая коричневая лисица перепрыгнула через ленивую собаку.

  
 Быстрая коричневая лиса ...

Без подчеркивания

Используйте .утилита no-underline для удаления подчеркивания или сквозного стиля.

   Ссылка без подчеркивания

Адаптивная

Чтобы управлять оформлением текста элемента в определенной точке останова, добавьте префикс {screen}: к любому существующему утилита для оформления текста. Например, используйте md: underline , чтобы применить утилиту underline только к средним размерам экрана и выше.

Для получения дополнительной информации о функциях адаптивного дизайна Tailwind ознакомьтесь с документацией по адаптивному дизайну.

  

  Быстрая, коричневая лиса, перепрыгнула через ленивого пса.

Быстрая коричневая лисица перепрыгнула через ленивую собаку.

Hover

Чтобы управлять оформлением текста элемента при наведении, добавьте префикс hover: к любой существующей утилите украшения текста. Например, используйте hover: underline , чтобы применить утилиту underline при наведении курсора.

   Link

Утилиты Hover также можно комбинировать с адаптивными утилитами, добавив префикс {screen}: перед префиксом hover: .

   Ссылка

Focus

Для управления оформлением текста элемента в фокусе добавьте префикс focus: к любой существующей утилите оформления текста. Например, используйте focus: подчеркните , чтобы применить утилиту underline к фокусу.

Утилиты Focus также можно комбинировать с адаптивными утилитами, добавив префикс {screen}: перед префиксом focus: .

Настройка

Варианты ответа и псевдокласса

По умолчанию для утилит оформления текста создаются только варианты ответа, наведения и фокусировки.

Вы можете контролировать, какие варианты генерируются для утилит оформления текста, изменив свойство textDecoration в разделе вариантов файла tailwind.config.js .

Например, эта конфигурация также будет генерировать варианты активного и группового наведения:

  // попутный ветер.config.js
  module.exports = {
    варианты: {
      // ...
- textDecoration: ['отзывчивый', 'наведение', 'фокус'],
+ textDecoration: ['отзывчивый', 'зависающий', 'фокус', 'активный', 'групповой наведение'],
    }
  }

Отключение

Если вы не планируете использовать утилиты оформления текста в своем проекте, вы можете полностью отключить их, установив для свойства textDecoration значение false в разделе corePlugins вашего файла конфигурации:

  // попутный ветер.config.js
  module.exports = {
    corePlugins: {
      // ...
+ textDecoration: false,
    }
  }
.

CSS цвет подчеркивания текста-декорации — qaruQaruSite Переполнение стека
  1. Около
  2. Товары
  3. Для команд
  1. Переполнение стека Общественные вопросы и ответы
  2. Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
  3. Вакансии Программирование и связанные с ним технические возможности карьерного роста
  4. Талант Нанимайте технических специалистов и создавайте свой бренд работодателя
  5. Реклама Обратитесь к разработчикам и технологам со всего мира
  6. О компании
.

No related posts.