Как добавить подчеркивание к заголовку? Нижнее подчёркивание html или как украсить свой текст для удобного чтения.

Представляю коротенькие фрагменты кода(сниппет) CSS, для реализации выделения анкоров ссылок с плавным подчёркиванием при наведении.
Зачем нужно выделять из общего месива текста, это и ежу понятно. Существует великое многообразие способов и видов оформления ссылок, всё ограничивается лишь фантазией мастера.
С помощью псевдо-класса:hover и магии , можно навесить на стандартные, скучно-оформленные синюшные ссылки, практически любой эффект.
Решения, о которых пойдёт речь сегодня, не представляют из себя, что-нибудь особо потрясающее или необычное. Всё по-простому, без особых наворотов, только лишь выделение ссылки цветом и лёгкая анимация линии подчёркивания.

Детально распишу только код CSS, так как на стороне Html менять и добавлять что-либо нет необходимости.

CSS

Во-первых, с помощью свойства line-height: установим межстрочный интервал в зависимости от базовой линии шрифта, у вас значение может быть другим. Сделаем ссылку блочно-строчной, встроенной в структуру текста, задав ей свойство display со значением inline-block . Избавимся от стандартного подчёркивания прописав text-decoration:none; и зальём ссылку нужным нам цветом.

a { line- height: 1 ; display: inline- block; color: #ffeb3b; text- decoration: none; cursor: pointer; }

a { line-height: 1; display: inline-block; color:#ffeb3b; text-decoration:none; cursor: pointer; }

Затем используем псевдоэлемент:after , чтобы у нас появилась возможность добавить дополнительный элемент, в нашем случае это линия, и определим простенький эффект перехода в свойстве transition: . Ширину линии изначально выставим с нулевым значением width: 0%; , высоту определим в 2px . Цвет линии может быть любым, в примере не стал особо фантазировать и выставил в соответствии цвета текста ссылки.

a: after { display: block; content: "" ; height: 2px; width: 0 %; background- color: #ffeb3b; transition: width . 3s ease- in- out; }

a:after { display: block; content: ""; height: 2px; width: 0%; background-color: #ffeb3b; transition: width .3s ease-in-out; }

Остаётся дело за малым, добавить нашей ссылке немного движухи. Для этого используем парочку псевдоклассов:hover и:focus . Первый будет определяет стиль ссылки при наведении, второй сработает когда на ссылке «плотно» установится курсор. Здесь мы изменим значение ширины, определим его в 100%.
Теперь, при наведении или фокусе на ссылке, стилизованная линия подчеркивания явит себя взору пользователя, плавно с еле-заметной задержкой, время которой, мы предусмотрительно определили ранее в свойстве transition: .

a: hover: after, a: focus: after { width: 100 %; }

a:hover:after, a:focus:after { width: 100%; }

В итоге мы получаем следующую картину:

Весь код в сборе будет выглядеть так:

a { display : inline-block ; color : #ffeb3b ; line-height : 1 ; text-decoration : none ; cursor : pointer ; } a: after { background-color : #ffeb3b ; display : block ; content : "" ; height : 2px ; width : 0% ; -webkit-transition: width .3s ease-in-out; -moz--transition : width .3s ease-in-out; transition : width .3s ease-in-out; } a: hover : after , a: focus : after { width : 100% ; }

a { display: inline-block; color:#ffeb3b; line-height: 1; text-decoration:none; cursor: pointer; } a:after { background-color: #ffeb3b; display: block; content: ""; height: 2px; width: 0%; -webkit-transition: width .3s ease-in-out; -moz--transition: width .3s ease-in-out; transition: width .3s ease-in-out; } a:hover:after, a:focus:after { width: 100%; }

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

Обновление и дополнения от 22.10.2017

В комментариях проскакивали вопросы о том, как сделать подчёркивание с центра текста ссылки, с плавным растягиванием в стороны. Если есть спрос, значит будет и предложение))).

Всё довольно просто, необходимо лишь добавить пару-тройку новых свойств, то есть, для основного элемента a определить позиционирование относительным position:relative; , а для псевдоэлемента a:after абсолютным position:absolute; с расстоянием от левого края родительского элемента left:50%; , а так же с помощью свойства transform определить сдвиг элемента по горизонтали на указанное значение transform:translateX(-50%) .

На выходе мы получаем вот такой результат:

В сборе весь код css, для плавного подчёркивания ссылки с центра, должен выглядеть примерно так:

a { display : inline-block ; color : #ffeb3b ; line-height : 1 ; text-decoration : none ; cursor : pointer ; position : relative ; } a: after { background-color : #ffeb3b ; display : block ; content : "" ; height : 2px ; width : 0% ; left : 50% ; position : absolute ; -webkit-transition: width .3s ease-in-out; -moz--transition : width .3s ease-in-out; transition : width .3s ease-in-out; -webkit-transform: translateX(-50% ) ; -moz-transform: translateX(-50% ) ; transform : translateX(-50% ) ; } a: hover : after , a: focus : after { width : 100% ; }

a { display: inline-block; color:#ffeb3b; line-height: 1; text-decoration:none; cursor: pointer; position:relative; } a:after { background-color: #ffeb3b; display: block; content: ""; height: 2px; width: 0%; left:50%; position:absolute; -webkit-transition: width .3s ease-in-out; -moz--transition: width .3s ease-in-out; transition: width .3s ease-in-out; -webkit-transform:translateX(-50%); -moz-transform:translateX(-50%); transform:translateX(-50%); } a:hover:after, a:focus:after { width: 100%; }

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

С Уважением, Андрей

Позволяет сделать разное подчеркивание в HTML нижнее (underline), верхнее (overline), перечеркнутый текст (line-through) и т.п. Совместим эту фишку с предыдущей и получится:

Во второй строке показано как все записывается в один ряд с text-decoration.

text-decoration-style — стиль подчеркивания текста

Опция задает внешний вид декоративной линии для / ссылки. В новых рекомендациях CSS были добавлены значения wavy и double, теперь их всего 5:

• solid — сплошная линия;
• double — двойная (из первого примера выше);
• dotted — состоит из последовательности точек;
• dashed — позволяет сделать пунктирное подчеркивание CSS;
• wavy — эффектная волнистая линия.

text-underline-position — позиционирование CSS подчеркивания

С помощь этого свойства можно управлять позицией линии относительно глифа шрифта.
Всего доступны 4 варианта:

• auto — располагается максимально близко базовой линии текста;
• under — под самой нижней границей шрифта;
• left и right — слева/справа для записей, отображаемых вертикально.

Вот наглядное отличие нижнего подчеркивания текста с помощью under и auto:

Разница, думаю, вполне очевидна.

text-decoration-skip — убираем подчеркивание для элементов

С помощью опции можно отменить (пропустить) декорирование некоторых элементов в HTML строке. Чтобы лучше понять допустимые значения spaces, objects, box-decoration, edges, ink продублирую картинку из прошлой заметки:

То есть, например, с помощью ink вы можете сделать нижнее подчеркивание в CSS, которое бы не пересекалось с символами . Значение objects позволяет пропускать инлайновые элементы (inline-block) — вставляете span, и сплошная линия прервется в соответствующем месте:

Параметры box-decoration, spaces, edges намного хуже поддерживаются браузерами, поэтому их результат иногда отличается от ожидаемого. Вот состояние по совместимости/поддержке text-decoration на момент написания статьи:

Дополнительные фишки для подчеркивания ссылок

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

Как убрать подчеркивание ссылки

a:hover { text-decoration: underline; }

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

Если будут еще какие-то вопросы по теме, задавайте их в комментариях. Постараемся рассмотреть позже или подсказать в ответах. Главное в этом деле практика — попробуйте добавить разные свойства для опции text-decoration непосредственно в примерах или создайте свой тестовый файл. Надеемся по теме подчеркивания текста и ссылок в CSS / HTML все стало ясно.

Для форматирования текста существует много тегов. Одни их них используются часто (и их вы быстро запомните), другие - редко (их и не надо запоминать).

Здесь мы рассмотрим те, которые используются часто.

Теги, делающие текст заголовками

Эти теги выделяют текст в виде заголовков. Т.е. каждый заголовок начинается с новой строки, выделен полужирным шрифтом и имеет свой размер (заголовок первого уровня самый большой, шестого - самый маленький).

Эти теги могут использоваться с параметром горизонтального выравнивания align . Возможные значения этого параметра:

• left - слева,
• right - справа,
• center - по центру,
• jastify - по ширине.

Пример кода:

Теги разделения на абзацы и переноса строки

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

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

У тега

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

• left - слева,
• right - справа,
• center - по центру,
• jastify - по ширине.

Пример кода:

Форматирование html

Это абзац, он отделен от всего текста пустыми строками сверху и снизу и выровнен по левому краю.

Это абзац, он отделен от всего текста пустыми строками сверху и снизу и выровнен по правому краю.

Это абзац, он отделен от всего текста пустыми строками сверху и снизу и выровнен по центру.

Это просто текст.
Это текст с новой строки.

В окне браузера это будет выглядеть так:

Теги, выделяющие текст курсивом

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

Пример кода:

Форматирование html Этот текст в тегах cite
Этот текст в тегах dfn
Этот текст в тегах em
Этот текст в тегах i

В окне браузера это будет выглядеть так:

Теги, выделяющие текст полужирным шрифтом

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

Пример кода:

Этот текст в тегах strong
Этот текст в тегах b

В окне браузера это будет выглядеть так:

Теги, выделяющие текст подчеркиванием

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

Пример кода:

Форматирование html Просто текст

Этот текст в тегах u

В окне браузера это будет выглядеть так:

Теги, выводящие текст моноширинным шрифтом

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

Пример кода:

Форматирование html Просто текст
Этот текст в тегах kbd
Этот текст в тегах samp
Этот текст в тегах tt

В окне браузера это будет выглядеть так:

Теги, выводящие текст в верхнем и нижнем индексах

Теги выводят текст ниже уровня строки шрифтом меньшего размера.
Теги выводят текст выше уровня строки шрифтом меньшего размера.
Удобны для вывода математических и химических формул.

Пример кода:

Форматирование html y=x 2 - уравнение параболы.

H 2 O - формула воды.

В окне браузера это будет выглядеть так:

Тег font и его параметры

Теги указывают параметры шрифта текста:

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

size - размер шрифта в условных единицах от 1 до 7. По умолчанию размер шрифта равен 3.

color - цвет текста (по умолчанию - черный).

Существуют два способа задания цвета: по имени и указанием шестнадцатеричного кода цвета.

С именными цветами (их 156) все просто, смотрим в соответствующую таблицу , выбираем понравившийся цвет и пишем его имя в значение параметра (например, color="blue").

Но гораздо больший выбор предоставляет второй способ. Здесь мы можем выбирать из миллиона цветов, указав его шестнадцатеричный код. Этот код представляет собой 6 цифр и начинается с символа "#". Не будем вдаваться в подробности, как формируется код цвета, укажем лишь на то, что получить его можно, например, в программе Photoshop. О том, как это делать читайте на странице
Понятнее будет на примере:

Выделим слово "текст" красным цветом:

Текст

Теперь добавим теги курсива (открывающий - слева, закрывающий - справа):

Текст

А теперь - теги полужирного начертания:

Текст

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

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

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

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

За форматирование текста отвечают стандартные теги HTML:

Внимание! Я выпустил новую тему Romb для ваших статейников и блогов. Максимально быстрая по Google PageSpeed и максимальная оптимизация под SEO.

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

Шаг 1. Прописываем параметры CSS

Откройте свой файл стилей (style.css, css.css, screen.css и прочее) и добавьте в самый конец такое:

Strong {font-weight:bold;} .italic {font-style:italic;} .underline{text-decoration:underline;}

Strong { font-weight : bold ; } Italic { font-style : italic ; } Underline { text-decoration : underline ; }

Здесь мы задали соответствующим классам свой внешний вид. Теперь вы можете в режиме HTML взять нужный отрезок текста, или слово, в тег span с нужным параметров, в результате чего текст примет нужный вид: жирный, курсив или подчеркивание нижнее. Смотрите:

Однако это времязатратно каждый раз вручную прописывать новый тег span с классом. Поэтому предлагаю вариант это автоматизировать.

Шаг 2. Добавляем свои кнопки в панель форматирования текста

Теперь мы добавим новые кнопки в панель форматирования текста в админке вашего сайта на WordPress. Выглядеть это будет вот так:

Как видно с картинки, у меня в режиме HTML добавилось 3 новых кнопки. Именно на них я "подвесил" созданные span с нужными классами (strong, italic и underline).

Открываем свой файл functions.php и в самый конец, перед закрывающим ?> , добавляем такой код (позаимствован, но модифицирован мной):

/*свои кнопки форматирования текста*/ add_action("admin_footer", "eg_quicktags"); function eg_quicktags() { ?> jQuery(document).ready(function(){ if(typeof(QTags) !== "undefined") { QTags.addButton("zhirny", "Жирный", "", ""); QTags.addButton("italic", "Курсив", "", ""); QTags.addButton("underline", "Подчеркивание", "", ""); } });