Css нижнее подчеркивание: text-decoration-line | htmlbook.ru

Красивое 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

(18 голосов, в среднем: 4.7 из 5)

не скупись ставь лайк Подписка на обновления:

html нижнее подчеркивание текста — Все о Windows 10

На чтение 4 мин. Просмотров 58 Опубликовано 15.12.2019

Название пришло от английского слова «underline». Html тег считается более новым.

Преобразуется на странице в

Обычный текст. Подчеркнутый текст через тег u

Подчеркнутый текст через свойство CSS text-decoration

В CSS есть свойство text-decoration , которое отвечает за форматирование текста html для создания подчеркивания.

Синтаксис CSS text-decoration

• none — текст без оформления
• underline — нижнее подчеркивание
• overline — верхнее подчеркивание
• line-through — зачеркивание текста
• blink — мерцающий текст (рекомендуется не применять это значение)

Нас интересует значение underline

Преобразуется на странице в

Можно также задавать стиль линии и цвет. Более подробно про эту возможность читайте в статье: CSS text-decoration

Подчеркнутый текст через свойство CSS border-bottom

Свойство CSS border-bottom создано для создании рамок (границ) объекта снизу. Естественно таким образом можно задавать и подчеркивание тексту.

Преобразуется на странице в

Текст со свойством border-bottom (красное подчеркивание)
Текст со свойством border-bottom (пунктирное подчеркивание)

Подчеркивание для блочных элементов вроде тега

Линия под текстом на всю ширину блока

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

Пример 1. Линия на всю ширину

HTML5 CSS 2.1 IE Cr Op Sa Fx

Расстояние от линии до текста можно регулировать свойством padding-bottom , добавляя его к селектору h2 . Результат данного примера показан на рис. 1.

Рис. 1. Линия под заголовком

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

Чтобы подчеркнуть только текст, необходимо воспользоваться свойством text-decoration со значением underline , опять же, добавляя его к селектору h2 (пример 2).

Пример 2. Линия на ширину текста

HTML5 CSS 2.1 IE Cr Op Sa Fx

Результат данного примера показан на рис. 2.

Рис. 2. Подчеркивание заголовка

В случае использования свойства text-decoration линия жестко привязана к тексту, поэтому определить ее положение и стиль не удастся.

Существует несколько способов реализовать подчеркивание в CSS. Форматирование текста в CSS реализуется с помощью свойства text-decoration. Оно позволяет реализовать подчеркнутый текст в CSS. Для этого необходимо установить значение underline. Если текст родительского элемента уже подчеркнут, можно также использовать значение inherit.
Например, этот код сначала убирает подчеркивание (с помощю значения none) ссылки, а потом – добавляет, если посетитель сайта наводит на нее мышью.

Плюсы стандартного метода следующие:

1. Простота.
2. Может подчеркивать многострочный текст.
3. Используется на любом фоне.

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

Другие способы подчеркивания в CSS

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

border-bottom

Это старое свойство, позволяющее изменять нижнюю границу текста. Это свойство css подчеркивает текст пунктиром, сплошной линией и как душе угодно. Также метод позволяет регулировать толщину подчеркивания. Пример кода с использованием свойства border-bottom у строчных элементов.

Результат интерпретации браузером этого кода.

Недостаток способа – подчеркивание осуществляется слишком низко по сравнению с текстом, поэтому линия (или пунктир) появляются уже под выносными элементами. Чтобы исправить это, можно использовать свойство text-shadow, использовав цвет фона в качестве цвета тени. Но выделение будет очень уродливым.
Также верстальщик имеет возможность применять переходы и анимации к подстрочной линии. Например, можно реализовать изменение цвета в течение какого-то времени. Если не использовать для пропуска выносных элементов свойство text-shadow, свойство может работать на любом фоне.

box-shadow

Это свойство использует две внутренние тени: первая рисует прямоугольник, а вторая прячет его часть. Метод может использоваться только на однотонном фоне. К этому свойству также можно добавить text-shadow для пропуска выносных элементов. Плюсы метода:

1. Возможность позиционировать подчеркивание ниже базовой линии.
2. Возможность изменять цвет и толщину линии.
3. Можно использовать вместе с многострочным текстом.

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

background-image

Этот метод почти не имеет недостатков, а его потенциал воистину огромен. Идея проста – создание радиального градиента совместно со свойством background-position. Это позволит создать изображение, которое будет находиться под текстом и повторяться по всей длине строчки.
Чтобы реализовать работу данного подхода, необходимо прописать режим отображения display: inline;
Выглядит это так.

Этот код, примененный к элементу, реализует подчеркивание длинным пунктиром. Если же точки остановки градиента установить в 50%, а не 75, то подчеркивание будет квадратиками. Свойство background-position в этом случае размещает фон под текстом, а background-repeat заставляет его повторяться.
Вместо градиента можно использовать готовое фоновое изображение и реализовать, например, подчеркивание звездочками.

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

CSS свойство text-decoration

Содержание web-сайта, в тех или иных случаях, требует оформления его части в виде подчёркнутого, перечёркнутого, а также текста с линией сверху или мигающий вариант отображения, который в прочем в настоящее время мало используется в виду не соответствия с текущими требованиями. Одновременно можно задействовать более одного стиля, перечисляя выбранные значения через пробел.

Наиболее распространённые стили

underline – подчёркивание текста сплошной линией.

HTML

<div>
  <p>
    Подчеркнутый текст.
  </p>
</div>

CSS

.box{
    width: 300px;
    margin: 0px auto;
    padding: 3px 20px;
    border-radius: 8px;
    background-color: #fc0;
    border: 3px solid #960;
}
.box p{
    font-size: 25px;
    font-weight: bold;
    text-align: center;
    text-decoration: underline;
}

line-through – вывод перечеркнутого текста.

HTML

<div>
  <p>
    Перечёркнутый текст.
  </p>
</div>

CSS

.box p{
    font-size: 25px;
    font-weight: bold;
    text-align: center;
    text-decoration : line-through; 
}

none – отменяет все заданные ранее эффекты, включая и подчеркивания у ссылок которое установлено по умолчанию.

HTML

<div>
  <p>
    Отмена эффектов.
  </p>
</div>

CSS

.box p{
    font-size: 25px;
    font-weight: bold;
    text-align: center;
    text-decoration : none;
}

Менее используемые стили

overline – отображает текст с линией поверх него.

HTML

<div>
  <p>
    Линия над текстом.
  </p>
</div>

CSS

text-decoration : overline;

blink – этот параметр задаёт пульсирующий текст.

HTML

<div>
  <p>
    Пульсирующий текст.
  </p>
</div>

CSS

text-decoration : blink;

font-weight, font-style и т.д. | lesson-web.ru

Наверняка, из урока по Html вы помните теги «b», «i» и «u», которые делают наш текст жирным, курсивным и подчёркнутым. На самом деле, в CSS есть аналоги этих тегов, которые позволяют сделать тоже самое.

Итак, для того, чтобы сделать текст жирным, мы используем свойство «font-weight» со значением «bold».

.box{
  font-weight: bold;
}

А если у вас, может быть, уже задан «font-weight: bold» и вы хотите сбросить это значение, тогда вы пишете «normal».  

.box{
  font-weight: normal;
}

Так же, можно задавать жирность в цифирных значениях. Если шрифт поддерживает разную толщину шрифтов, точнее разную толщину «bold’а». Толщину можно задать значением от 100 до 900. 

.box{
  font-weight: 300; // Миниуми: 100, Максимум: 900
}

Дальше, если мы хотим сделать наш шрифт курсивным, то пишем «font-style» и здесь задаёте свойство «italic», и тогда текст становится курсивным.

.box{
  font-style: italic; 
}

Но в случае с «font-style» есть ещё значение «oblique».

.box{
  font-style: oblique;
}

Оно, в принципе, ничего визуально не изменяет, но фактически делаются совершенно разные действия. Если мы делаем «italic», то берётся курсивное начертание шрифта. А вот второе значение, которое очень сложно произносить, «oblique», просто наклоняет текст. Короче, на будущее, просто используем «italic», и больше вам особо ничего не надо.

Дальше, как получить шрифт с нижним подчёркиванием? Для этого используем свойство «text-decoration» и «underline». 

.box{
  text-decoration: underline; 
}

Пример: Текст с нижним подчеркиванием

С английского «under» — «низ», «line» — «линия», «линия снизу». Всё логично.

Также у «text-decoration» есть ещё несколько подсвойств. Первое – это «overline», линия сверху.

.box{
  text-decoration: overline; 
}

Пример: Текст с верхним подчеркиванием

Дальше, «line-through», которое делает перечёркивание.

.box{
  text-decoration: line-through; 
}

Пример: Текст с перечеркиванием

То есть, на будущее, если вы захотите делать блок с прайсом на что-то, и там будет старая цена и новая цена. Как правило, старая цена подсвечивается красненьким и перечёркивается. С помощью этого CSS-свойства вы можете перечеркнуть текст, и он будет как будто старая цена. Ну, не обязательно это будет старая цена, но, я думаю, можно для таких случаев использовать это свойство. Всё, «line-through», «overline» и «underline». Больше вам пока что тоже ничего не надо. 

И ещё одно CSS-свойство, которое нельзя сделать с помощью тегов – это «text-transform». Здесь есть несколько таких свойств. Первое, давайте, рассмотрим «capitalize».

.box{
  text-transform: capitalize; 
}

Что даёт это свойство? Каждая первая буква каждого слова становится заглавной. На самом деле, немножечко странное CSS-свойство. Честно, никогда в жизни его не использовал. Скорее всего, его можно использовать для аббревиатур, когда мы делаем каждое слово с большой буквы, то здесь можно использовать. Но вообще, довольно-таки бесполезное свойство, на мой взгляд.

Дальше, что нам ещё интересно?

«Lowercase» — это когда все буквы становятся нижнего регистра.

.box{
  text-transform: lowercase; 
}

И наоборот, «uppercase», когда все буквы становятся заглавными или верхнего регистра.

.box{
  text-transform: uppercase; 
}

Бывают такие сайты, где чисто по стилистике все слова пишутся большими буквами, когда каждая буква всегда заглавная. То есть чтобы не писать текст через CapsLock или с зажатым Shift’ом все слова – это неудобно, можно использовать свойство «text-transform: uppercase», и будет вам в принципе счастье. Давайте ещё раз: «capitalize», «lowercase» и «uppercase» — вот три самых важных свойства для этого CSS-свойства.

Собственно, вот так вот можно работать с нашим текстом. Давайте повторюсь. Первое — «font-weight», чтобы делать жирным/нежирным наш текст. «Font-style» для того, чтобы работать с курсивностью. «Text-transform», чтобы делать буквы заглавными и строчными. И «text-decoration», чтобы делать подчеркивание верхнее, нижнее или по центру. 

Вот такие классные CSS-свойства. Всё, на этом мы заканчиваем с ними и идём к следующему уроку!

_ — Нижнее подчёркивание: U+005F lowbar

Значение символа

Нижнее подчёркивание. Основная латиница.

Символ «Нижнее подчёркивание» был утвержден как часть Юникода версии 1.1 в 1993 г.

Свойства

Кодировка

Таблица Alt-кодов всех символов 📋 полный список альт кодов

Откуда у target=”_blank” нижнее подчеркивание | by Liudmila Mzhachikh

Задавались когда-нибудь вопросом, почему все атрибуты как атрибуты, а у атрибута ссылки target значение с нижним подчеркиванием? 🤔

<a href="#" target="_blank">Я откроюсь в новом окне<a/>

Согласно спеке, у атрибута target есть 5 возможных значений (да, не только _blank):

🔗_blank — загружает страницу в новое окно браузера

🔗_self — загружает страницу в текущее окно

🔗_parent — загружает страницу во фрейм-родитель

🔗_top — отменяет все фреймы и загружает страницу в полном окне браузера

🔗{framename} — открывает документ во фрейме по имени {framename}

Наверняка, вы никогда и не использовали ничего, кроме _blank, и это не удивительно.

Зачем же тогда все остальные?

Этот вопрос уходит корнями в историю. В незапамятные времена, когда ajax-а не было и в помине, страницы часто делили на множество окошек с помощью тега <frameset>. Например, одно окошко служило навигацией, а другое — контентом. Получалось некое подобие обновления без перезагрузки страницы.

Сайт, разделенный на фреймы

И нужно было как-то указывать браузеру, в каком фрейме показывать ответ. За это и отвечал атрибут target.

А что происходит, когда мы пишем blank без нижнего подчеркивания? Почему ссылка все равно открывается в новом окне?

А происходит вот что. Браузер видит blank и думает, что это имя фрейма. Он пытается открыть документ во фрейме с name=blank, и, не находя такого, открывает его в новом окне и дает ему такое имя.

Поэтому если вы кликнете по такой ссылке второй раз, то новое окно не откроется. В отличие от _blank, который при каждом нажатии откроет новое окно.

Можно ли писать blank без нижнего подчеркивания? В целом, да, но это не по стандарту (соотвественно, поведение будет как для фрейма).

Будут ли обновлять стандарт, раз frameset-ы давно канули в лету?

Скорее всего нет, т.к. до сих пор существуют сайты с фреймами. Обновление стандарта без обратной совместимости поломает эти сайты.

Ссылки:

Как изменить цвет подчеркивания в CSS?

В текст HTML реализовано стилизацию, чтобы сделать его броским и привлекательным. Текст может быть выделен курсивом, подчеркиванием и полужирным шрифтом по требованию.

• Тег подчеркивания : Чтобы изменить цвет подчеркивания, нам нужно добавить некоторый стиль с помощью CSS (встроенный / внутренний / внешний). По умолчанию цвет подчеркивания черный. В CSS мы будем использовать свойство text-decoration для стилизации подчеркивания.

  Синтаксис:

      Здесь немного текста      

• CSS text-decoration-color Свойство: Это свойство используется для указания цвета украшений (надчеркивание, подчеркивание и сквозные линии) над текстом.

  Синтаксис:

   цвет украшения текста: цвет | начальная | наследовать ; 

Примеры ниже иллюстрируют подход к изменению цвета подчеркивания с помощью CSS

Пример 1:

HTML

Выход:

Пример 2:

HTML

9 0049

< html >

< голова >

< стиль

u {

текст-украшение-цвет: красный;

}

стиль >

головка >

< корпус 3 > 9000

< h3 >

Geeksforgeeks

< u > Портал компьютерных наук для вундеркиндов u >

 
 ... 
 

 .menu {цвет: красный; }
 

 

    ...
     

 

 .menu__item {цвет: красный; }
 

 
 ... 
 ... 
 

 .menu_hidden {display: none; }
.menu_theme_islands {цвет: зеленый; }
 

 

    ...
     ... 

 

 .menu__item_visible {}
.menu__item_type_radio {цвет: синий; }
 

  a {
 оформление текста: подчеркивание 0.15em rgba (0, 0, 0, 0); 
 переход: текст-оформление-цвет 300 мс; 
} 
 a: hover {
 цвет-украшения-текста: rgba (0, 0, 0, 1); 
} 
  

  a {
 оформление текста: подчеркивание 0.15em rgba (0, 0, 0, 1); 
 смещение подчеркивания текста: 0,2em; 
 переход: текст-украшение-цвет 300 мс, смещение текста-подчеркивания 300 мс; 
} 
 a: hover {
 цвет-украшения-текста: rgba (0, 0, 255, 1); 
 смещение подчеркивания текста: 0,4 эм; 
} 
  

  @property --offset {Синтаксис 
: '<длина>'; 
 наследует: false; 
 начальное значение: 0 пикселей; 
}  

  a {
 переход: --смещение 300 мс, цвет текста-декорации 300 мс; 
} 
 a: hover, 
 a: focus {
 --offset: 0.4em; 
 цвет-украшения-текста: rgba (0, 0, 255, 1); 
} 
  

  @supports not (background: paint (something)) {
 a {
 transition: text-underline-offset 400ms, text-decoration-color 400ms; 
} 
 a: hover, 
 a: focus {
 text-underline-offset: 0.4em; 
} 
} 
  

  .fancy {
  -webkit-text-decoration: двойное подчеркивание горячим розовым цветом;
  оформление текста: двойное подчеркивание горячим розовым цветом;
}
  

 .волнистый {
  текст-оформление: подчеркивание;
  -webkit-text-decoration-color: лосось;
  текст-украшение-цвет: лосось;
  -webkit-text-decoration-style: волнистый;
  стиль оформления текста: волнистый;
}
  

  .strike {
  -webkit-текст-украшение-цвет: красный;
  цвет оформления текста: красный;
  -webkit-text-decoration-line: сквозная строка;
  текст-украшение-строка: сквозная строка;
}
  

  .ink {
  -webkit-text-decoration: темно-бирюзовое сплошное подчеркивание;
  оформление текста: темно-бирюзовое однотонное подчеркивание;
  -webkit-text-decoration-skip: чернила;
  текст-украшение-пропуск: чернила;
}
  

  

  Становится  очень  модным

  

  .super {
  -webkit-text-decoration: Перу сплошная линия поверх;
  текст-оформление: перу сплошная линия;
  -webkit-text-decoration-skip: объекты;
  текст-украшение-пропуск: объекты;
}
  

 .auto {
  -webkit-text-decoration: синее сплошное подчеркивание;
  оформление текста: грифельно-синее сплошное подчеркивание;
  -webkit-текст-подчеркивание-позиция: авто;
  положение подчеркивания текста: авто;
}
  

  .under {
  -webkit-text-decoration: синее сплошное подчеркивание;
  оформление текста: грифельно-синее сплошное подчеркивание;
  -webkit-text-underline-position: под;
  текст-подчеркивание-позиция: под;
}
  

  
 
 Этот h3 является нижним.    

  
 
 Это подчеркнуто с помощью тега u.  
 Это подчеркнуто с помощью CSS text-decoration 
 Завершено еще одно оформление текста с помощью CSS 
 Еще одно использование CSS text-decoration-line. 
 Еще одно использование CSS, но на этот раз тоже подчеркнутое. 
  

  .firstUnderline {
  текст-украшение: подчеркивание
  
}

.SecondUnderline {
  text-decoration: подчеркивание волнистым зеленым
  
}
.ThirdUnderline {
  текст-украшение-строка: подчеркивание;
}
.UnderlineOverline {
  оформление текста: подчеркивание над чертой;
}
  

  

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



   Пунктирное подчеркивание высотой 5 пикселей 



   Перенос текста по строкам 

  

 .simpleUnderline {
  нижняя граница: сплошной 2px currentColor;
}

.Dottedunderline {
  нижняя граница: 5 пикселей, пунктирная красная;
}
.underline - blue {
  цвет нижней границы: синий;
}