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

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

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

• Располагаться ниже базовой линии строки;
• Не соприкасаться непосредственно с частями букв, выступающими ниже базовой линии;
• Должна быть возможность изменять цвет, толщину и стиль линии подчеркивания;
• Подчеркивание должно продолжаться после переноса текста;
• Подчеркивание должно работать на любом фоне.

Все это довольно очевидно. Но, насколько я знаю, не существует способа добиться всего этого с помощью CSS.

Подходы

Способы, с помощью которых можно подчеркнуть текст в интернете:

• text-decoration;
• border-bottom;
• box-shadow;
• background-image;
• Фильтры SVG;
• Underline.js (canvas);
• text-decoration-*.

Давайте рассмотрим их один за другим и поговорим об их плюсах и минусах.

text-decoration

text-decoration — это самый простой способ CSS подчеркивания. Применяется всего одно свойство и на этом все. Для небольших размеров шрифта это может выглядеть довольно прилично, но увеличьте размер и та же линия начинает выглядеть неуклюже.

Посмотреть пример

Самая большая проблема применения text-decoration — отсутствие настраиваемости. Свойство соответствует любому размеру шрифта или цвету текста, к которому оно применено, и не существует кроссбраузерного способа изменить заданный стиль.

ПЛЮСЫ

• Его просто применять;
• Располагается ниже базовой линии;
• По умолчанию добавляет отступы от частей букв, выступающих ниже базовой линии (в Safari и iOS);
• Переносится по строкам;
• Подходит для любого фона;

МИНУСЫ

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

border-bottom

border-bottom — отличается простотой использования и настраиваемостью. Свойство позволяет довольно просто изменять цвет, толщину и стиль линии подчеркивания текста CSS.

Результат применения border-bottom к строчным элементам:

Посмотреть пример

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

Посмотреть пример

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

Посмотреть пример

ПЛЮСЫ

• С помощью text-shadow можно задать отступы от частей букв, выступающих ниже базовой линии;
• Можно изменить цвет, толщину и стиль линии CSS подчеркивания;
• Можно задать переходы и анимацию для цвета и толщины линии подчеркивания;
• Переносится по умолчанию, если это не inline-block;
• Работает на любом фоне, если не используется text-shadow.

МИНУСЫ

• Размещается далеко от текста, это положение трудно изменить;
• Нужно использовать много дополнительных свойств;
• Странное выделение текста при использовании свойства text-shadow.

box-shadow

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

Посмотреть пример

Можно использовать тот же самый трюк, что и с text-shadow, чтобы имитировать отступы от частей букв, выступающих ниже базовой линии. Если линия подчеркивания должна отличаться по цвету от текста, то у вас не возникнет таких проблем, как в случае с text-decoration.

ПЛЮСЫ

• Нижнее подчеркивание CSS может быть размещено ниже базовой линии;
• С помощью text-shadow можно задать отступы ниже базовой линии;
• Можно изменить цвет и толщину линии подчеркивания;
• Подчеркивание переносится построчно.

МИНУСЫ

• Невозможно изменить стиль;
• Не работает для любого фона.

background-image

background-image дает результат, подходящий под все перечисленные критерии. При этом используются linear-gradient и background-position, чтобы создать изображение, которое повторяется по горизонтали вдоль строк текста. При этом для текста должно быть задано display: inline;.

Посмотреть пример

Вместо linear-gradient можно добавить собственное изображение с какими-нибудь эффектами.

Посмотреть пример

ПЛЮСЫ

• Подчеркивание ссылки CSS может быть размещено ниже базовой линии;
• С помощью text-shadow можно задать отступы ниже базовой линии;
• Можно изменять цвет, толщину и стиль подчеркивания;
• Работает с пользовательскими изображениями;
• Подчеркивание переносится построчно;
• Работает на любом фоне, если не используется text-shadow.

МИНУСЫ

• Размер изображения может изменяться по-разному в зависимости от разрешения, браузера и масштаба просмотра.

Фильтры SVG

Можно создать SVG элемент filter, который рисует линию, а затем расширяет текст, чтобы скрыть прозрачные части линии. После этого нужно задать для фильтра идентификатор и сослаться на него в CSS:

filter: url(‘#svg-underline’).

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

Посмотреть пример

Вот как это выглядит в Chrome и Firefox:

Поддержка браузерами IE, Edge, и Safari является проблематичной. Проверить наличие поддержки SVG-фильтра в CSS трудно.

ПЛЮСЫ

• Может быть размещено ниже базовой линии;
• Можно задать отступы ниже базовой линии;
• Можно изменять цвет, толщину и стиль линии подчеркивания;
• Работает на любом фоне.

МИНУСЫ

• Подчеркивание не переносится на несколько строк;
• Не работает в IE, Edge или Safari, но можно создать резервный вариант с помощью text-decoration. В Safari оно будет выглядеть хорошо в любом случае.

Underline.js (canvas)

Underline.js рисует CSS подчеркивание с помощью элементов . Это новый подход, который работает на удивление хорошо.

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

Мы приводим данный метод для демонстрации возможностей при создании красивых, интерактивных подчеркиваний.

Свойства text-decoration-*

Это свойство прекрасно работает само по себе, но можно добавить несколько экспериментальных свойств для настройки внешнего вида:

• text-decoration-color;
• text-decoration-skip;
• text-decoration-style.

Только не радуйтесь раньше времени. Помните о проблеме поддержки браузерами.

TEXT-DECORATION-COLOR

Позволяет изменить цвет CSS подчеркивания пунктиром отдельно от цвета текста. Данное свойство хорошо поддерживается браузерами. Оно работает в Firefox и с помощью префикса в Safari. Но если не обрабатывать разрывы ниже базовой линии текста, то Safari поместит подчеркивание поверх текста.

Firefox:

Safari:

TEXT-DECORATION-SKIP

Это свойство добавляет разрывы ниже базовой линии:

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

TEXT-DECORATION-STYLE

Данное свойство предлагает те же типы подчеркивания текста CSS, которые можно задать с помощью border-style. И кроме этого добавляет тип линии wavy (волнистая).

Ниже приводятся различные значения, которые можно использовать:

• dashed;
• dotted;
• double;
• solid;
• wavy.

На данный момент text-decoration-style работает только в Firefox, вот скриншот:

Варианты стилей однотонного подчеркивания

Выглядит знакомо, не правда ли?

В чем недостатки?

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

После небольшого исследования я нашел эти два свойства:

• text-underline-width;
• text-underline-position.

Похоже, они рассматривались в более ранних версиях CSS, но так и не были реализованы из-за отсутствия интереса.

Вывод

Для CSS подчеркивания небольшого текста я рекомендую использовать text-decoration, а затем применить text-decoration-skip. Это выглядит не слишком изящно в большинстве браузеров, но зато будет работать. Плюс всегда есть шанс, что поддержка этих свойств будет реализована в большинстве браузеров.

Для большего текста стоит использовать подход фонового изображения. Он работает. Кроме этого, существуют примеси Sass, которые можно использовать вместе с ним. Можно одновременно не использовать text-shadow, если линия подчеркивания достаточно тонкая или отличается от текста по цвету.

Для одиночных строк текста используйте border-bottom и любые другие свойства.

Для добавления разрывов ниже базовой линии текста на градиентных фонах или фоновых изображениях попробуйте использовать SVG-фильтры. А когда поддержка браузерами существенно улучшится, можно будет добиться нужного эффекта с помощью свойств text-decoration-*.

Перевод статьи «Styling Underlines on the Web» был подготовлен дружной командой проекта Сайтостроение от А до Я.

Источник: https://www.internet-technologies.ru/articles/stili-podcherkivaniya-v-internete.html

text-decoration

12.0+

3.0+

1.0+

1.0+

3.5+

1.0+

CSS свойство text-decoration позволяет добавить к тексту такие элементы декора как подчёркивание, надчёркивание и перечёркивание (то есть сделать зачёркнутый текст).

Свойство text-decoration может принимать одно значение или больше. Чтобы задать сразу несколько значений, их следует разделить пробелами.

Самый часто используемый декор для текста — это подчёркивание. Подчёркнутый текст задаётся значением underline:

/*делаем подчёркнутый текст*/ span {text-decoration: underline;}

/*убираем подчёркивание ссылок*/ a {text-decoration: none;}

Часто требуется не просто убрать подчёркивание ссылки в обычном состоянии, а сделать так, чтобы ссылки были подчёркнуты при наведении на них курсора мыши. Чтобы сделать подчёркивание ссылки при наведении, надо воспользоваться псевдо-классом :hover:

/*убираем подчёркивание ссылок*/ a {text-decoration: none;} /*задаём подчёркивание ссылок при наведении*/ a:hover {text-decoration: underline;}

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

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

Значение по умолчанию:

Применяется:

Анимируется:

Наследуется:

Версия:

Синтаксис JavaScript:

none

ко всем элементам, а также к псевдо-элементам ::first-letter и ::first-line

нет

нет

CSS1

object.style.textDecoration=»overline»

Синтаксис

text-decoration: none|underline|overline|line-through|inherit;

Значения свойства

ЗначениеОписание

none	Оставляет текст без изменений.
underline	Определяет горизонтальную линию под текстом.
overline	Определяет горизонтальную линию над текстом.
line-through	Определяет линию перечеркивающую текст.
inherit	Указывает, что значение наследуется от родительского элемента.

Пример

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

div {
text-decoration: none;
}

Источник: https://puzzleweb.ru/css/pr_text-decoration.php

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

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

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

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

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

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

HTML

Для начала давайте создадим элемент. Например, тег 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

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

текст ссылки

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

текст ссылки

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%; }

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

Источник: https://kngaroo.studio/blog/useful/podcherkivanie-elementov-na-css

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

Существует куча разных способов оформления подчеркивания. Возможно, вы вспомните статью Марсина Вичари “Crafting link underlines” на Medium. Разработчики Medium не пытаются сделать что-то безумное, они просто хотят создать красивую линию под текстом.

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

Что не так с привычным text-decoration: underline? Если речь идет об идеальном сценарии, подчеркивание должно делать следующее:

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

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

Так что это за различные способы, которыми мы можем реализовать подчеркивание в вебе?

Вот те, которые я рассматриваю:

• text-decoration;
• border-bottom;
• box-shadow;
• background-image;
• фильтры SVG;
• Underline.js (canvas);
• text-decoration-*.

Разберем эти способы один за другим и поговорим о плюсах и минусах каждого из них.

text-decoration

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

See the Pen Underlines 1: text-decoration by John D. Jameson (@johndjameson) on CodePen.

Самая большая проблема с text-decoration это отсутствие настроек. Вы ограничены цветом и размером шрифта текста и у вас нет кроссбраузерного способа изменить это. Мы еще поговорим об этом подробнее.

Плюсы:

• легко использовать;
• позиционируется ниже базовой линии;
• по умолчанию пропускает нижние выносные элементы в Safari и iOS;
• подчеркивает многострочный текст;
• работает на любом фоне.

Минусы:

• не пропускает нижние выносные элементы во всех остальных браузерах;
• не позволяет изменять цвет, толщину или стиль линии.

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

Вот так border-bottom выглядит у строчных элементов.

See the Pen Underlines 2: border-bottom by John D. Jameson (@johndjameson) on CodePen.

Главный недостаток — это расстояние линии подчеркивания от текста, она целиком ниже выносных элементов. Вы можете исправить это, задав элементам свойство inline-block и уменьшив line-height, но тогда вы потеряете возможность оборачивать текст. Хорошо для отдельных строчек, но больше нигде непригодно.

See the Pen Underlines 3: border-bottom (inline-block) by John D. Jameson (@johndjameson) on CodePen.

See the Pen Underlines 4: border-bottom (text-shadow) by John D. Jameson (@johndjameson) on CodePen.

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

Плюсы:

• может пропускать выносные элементы с помощью text-shadow;
• может изменять цвет, жирность и стиль линии;
• позволяет использовать переходы и анимации цвета и жирности;
• работает с многострочным текстом, если не применено значение inline-block;
• работает на любом фоне, если не использовать text-shadow.

Минусы:

• позиционируется слишком низко и перемещается сложным способом;
• используется много дополнительных свойств для правильной работы;
• при использовании text-shadow выделение текста выглядит уродливо.

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

See the Pen Underlines 5: box-shadow by John D. Jameson (@johndjameson) on CodePen.

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

Плюсы:

• может позиционироваться ниже базовой линии;
• может пропускать выносные элементы за счет text-shadow;
• позволяет изменять цвет и толщину линии;
• работает с многострочным текстом.

Минусы:

• не позволяет изменять стиль подчеркивания;
• работает не на любом фоне.

Метод с background-image наиболее близок к нашим желанием и обладает минимумом недостатков. Идея состоит в использовании linear-gradient и background-position для создания изображения, повторяющегося под строчками текста.

Для работы этого подхода необходимо, чтобы текст был в стандартном режиме display: inline;.

See the Pen Underlines 6: background-image by John D. Jameson (@johndjameson) on CodePen.

See the Pen Underlines 7: background-image (External) by John D. Jameson (@johndjameson) on CodePen.

Плюсы:

• может позиционироваться ниже базовой линии;
• может пропускать выносные элементы за счет text-shadow;
• допускает изменение цвета, толщины и стиля линии;
• работает с кастомными изображениями;
• обертывает несколько строчек текста;
• работает на любом фоне, если не применять text-shadow.

Минусы:

• размер изображения может изменяться в зависимости от разрешения экрана, браузера и увеличения.

Я достаточно много поиграл с этим способом. Вы можете создать строчный фильтр SVG, который рисует линию и затем расширяет текст для маскировки части линии, которую мы хотим сделать прозрачной. Затем вы можете задать фильтру id и ссылаться на него в CSS примерно так filter: url(‘#svg-underline’).

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

See the Pen Underlines 8: SVG Filters by John D. Jameson (@johndjameson) on CodePen.

Вот как это выглядит в Chrome и Firefox:

Поддержка в IE, Edge и Safari проблематична. Сложно тестировать поддержку фильтра SVG в CSS. Вы можете использовать директиву @supports с filter, но это проверит лишь работу ссылки на фильтр, но не работу самого фильтра. Мои попытки завершились муторным определением возможностей браузера, это ощутимый недостаток метода.

Плюсы:

• может позиционироваться ниже базовой линии;
• может пропускать выносные элементы;
• допускает изменение цвета, толщины и стиля линии;
• работает на любом фоне.

Минусы:

• не работает с многострочным текстом;
• не работает в IE, Edge и Safari, но вы можете использовать text-decoration в качестве запасного варианта, в Safari он смотриться достойно.

Underline.js завораживает. Я считаю впечатляющим то, что сделала Вентин Жанг за счет владения JavaScript и внимания к деталям. Если вы не видели техническое демо Underline.

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

Это новый подход, который работает на удивление хорошо.

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

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

Новые свойства text-decoration

Вы помните, что я обещал подробнее поговорить о text-decoration. Время пришло.

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

• text-decoration-color
• text-decoration-skip
• text-decoration-style

Но слишком сильно не радуйтесь… Поддержка в браузерах — как всегда. Такие дела.

text-decoration-color

Свойство text-decoration-color позволяет вам изменять цвет подчеркивания отдельно от цвета текста. Поддержка этого свойства лучше, чем можно было ожидать — оно работает в Firefox и с префиксом в Safari. Вот в чем загвоздка: если у вас есть выносные элементы, Safari поместит подчеркивание поверх текста.

Firefox:

Safari:

text-decoration-skip

Свойство text-decoration-skip включает пропуск выносных элементов в подчеркиваемом тексте.

Это свойство нестандартное и работает сейчас только в Safari, с префиксом -webkit-. Safari по умолчанию активирует это свойство, поэтому выносные элементы всегда не перечеркиваются.

Если вы используете Normalize, то учтите, что последние версии отключают это свойство ради последовательного поведения браузеров. И если вы хотите, чтобы подчеркивание не затрагивало выносные элементы, вам надо вручную активировать его.

text-decoration-style

Свойство text-decoration-style предлагает такие же возможности оформления, что и у свойства border-style, добавляя кроме этого стиль wavy.

Вот список доступных значений:

• dashed
• dotted
• double
• solid
• wavy

Сейчас свойство text-decoration-style работает только в Firefox, вот скриншот из него:

Серия свойств text-decoration-* намного более интуитивна в использовании, чем остальные свойства CSS для оформления подчеркивания. Но если взглянуть внимательнее, то для удовлетворения наших запросов не хватает способов задать толщину или позицию линии.

После небольшого исследования, я нашел еще пару свойств:

• text-underline-width
• text-underline-position

Судя по всему, они относятся к ранним черновикам CSS, но их так и не реализовали в браузерах из-за отсутствия интереса.

Так какой же способ подчеркивания лучший?

Смотря по обстоятельствам.

Для небольшого текста я рекомендую использовать text-decoration с оптимистичным добавлением text-decoration-skip.

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

Для основного текста имеет смысл использовать background-image. Этот подход работает, выглядит замечательно и для него есть миксины Sass. Вы, в принципе, можете пропустить text-shadow, если подчеркивание тонкое или отличается цветом от текста.

Для отдельных строк текста используйте border-bottom вместе с любыми дополнительными свойствами.

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

В будущем, когда поддержка в браузерах станет лучше, единственным ответом будет набор свойств text-decoration-*.

Также рекомендую обратить внимание на статью Бенджамина Вудроффа CSS Underlines Suck, в которой рассматриваются те же вопросы.

Источник: http://prgssr.ru/development/sposoby-podcherkivaniya.html

Текст CSS. Выравнивание текста, цвет текста, подчеркивание в CSS и прочее

Для того, чтобы подключить к нашему готовому документы HTML таблице стилей мы идем в Notepad++ и нажимаем «Файл», «Новый»(Ctrl+N) и «Сохранить как». После этого нам будет предложено сохранить новый файл в папке.

Для этого, я обычно заранее создаю папку в директории — www. и называю ее style.css . В эту папку сохраняем наш файл выбрав для него любое название, но расширение css.

Теперь идем в наш HTML документ и внутри тега    прописываем следующий код:

css/style.css – у вас могут быть любые другие значения и названия, но расширение css

— обязательно. Все остальное тоже без изменения. К одному документу можно подключить несколько файлов и наоборот.

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

Они имеют такое же название, как и теги. Например:

#header {

color: #010101;

}

#header – селектор поid. Для того, чтобы он сработал нам нужно в HTML документе прописать идентификатор – id= “header” Его можно задать для любой части документа. Дать ему любое название из латинских букв, но нельзя начинать название с цифр.  Название идентификатора вы можете придумать сами, произвольно.

.new— селектор по классу. Его задают в теле HTML документа, присваивая класс.

-это тег тоже одинарный и его закрывать не требуется, как и  (id) идентификатор.

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

p, #header, .new{

color: #121212;

}

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

Например : 

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

Записываются такие селекторы таким образом:

Родитель и через пробел потомок. Например:

ul li {

color: #434343;

}

1)новая
         a:link{

color: #010101;

            }

2) Посещенная
a:visited{

color: #234353

}

3)Наведение курсором

a:hover{

color: #444543

}

4)Активная – во время щелчка

a:active{

color: #787878;

}

То это будет цвет ссылки для ВСЕХ состояний.

Для этого существует значение селектора:

 font-family: Tahoma, Verdona;
Значение шрифтов можно задавать разные, но стоит помнить, что не все браузеры могут корректно отображать все шрифты. Для надежности стоит воспользоваться сайтом:

ampsoft.net

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

Стоит отметить, что все шрифты можно условно разделить на группы :

1) sans-serif – без засечек (

Tahoma, Verdona)
2) serif— с засечками (Times New Roman)

3) monospace – (Lucida Console).С одинаковой длиной всех букв. Этот шрифт в основном используется, для специальных текстов отображающих написание программ и тегов.
Следует запомнить, что в ранних версиях HTML, названия шрифтов, состоящих из двух и  более слов, следует писать в двойных кавычках!

Его указывают с помощью font-size

2)em– условные единицы (1 em – по умолчанию) Так же как и проценты. 1,1=110%

3) px– в пикселях (по номиналу – 16 px)

4)pt – пункты. Это пришло из типографии. Один пункт = 1/72 дюйма. 10 pt

5) ключевые слова:
   а)  small — маленький- 80%

   б)  medium — средний – 100%

   в)  large — большой – 120%

Бывают и такие обозначения — xlarge, xxlarge, xsmall, xxsmalи так далее, но они редко используются.

font—style: italic;

Задать его можно практически любому элементу через простые действия. В нужном месте HTML

bbbbb

Для абзацев

:

bbbb

.new{

font-style: italic;

}

 или (bold или значение100-900). Стоит помнить, что более 700(это уже полужирный) современные браузеры не поддерживают, а потому, лучше задавать просто bold.

Атрибут: text-decoration:

Можно задать подчеркивание сверху: overline

Снизу: underline

Зачеркивание текста: line-throught

Пример перечеркивания курсива.

.new{

font-style: italic;

text-decoration: line-throught;

}

Часто бывает необходимо убрать подчеркивание с ссылок, которые подчеркнуты по умолчанию. Сделать это очень просто : text-decoration: none;
Это нужно прописать отдельно для ссылок:

a {

        text-decoration: none;

}

О выравнивании заголовка по центру блога, вы можете прочитать в моем посте здесь.Вы уже знаете, что для этого есть text—align:left ; (right; center; justify)
Стоит остановиться на значении
в примере:

.new4 {

        text-align: justify;

}

В этом примере выравнивание абзаца по всей ширине. То есть за счет незаметного увеличения интервала между словами.

text—indent: 35px;
Значение задаем в пикселях , в данном случае.

Line-height:normal; или 20-30-40px или 2 – коэффициент от текущего, можно задать и дробью – 1,5 (например)

word-spacing:

Для коротких слов может потребоваться интервал между буквами
letter—spacing

text-transform:

Значения:

uppercase – все буквы большие;

lowercase – все буквы маленькие;

capitalize– все слова с заглавной буквы;                                                                                                                                                   

Источник: http://abcinblog.blogspot.com/2016/04/text-css-vyravnivanie-texta-v-css.html

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

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

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

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

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

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

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

border-bottom

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

Сплошное подчеркивание<\p>

Пунктирное подчеркивание<\p>

Реализация подчеркивания синим цветом <\p>

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

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

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

box-shadow

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

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

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

.underline { background-size: 1px 1em; box-shadow: inset 0 -0.175em white, inset 0 -0.2em #000; display: inline; }

background-image

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

Выглядит это так.

.dashed { background-image: linear-gradient(to right, blue 75%, transparent 75%); background-position: 0 1.04em; background-repeat: repeat-x; background-size: 8px 3px; }

Этот код, примененный к элементу, реализует подчеркивание длинным пунктиром. Если же точки остановки градиента установить в 50%, а не 75, то подчеркивание будет квадратиками.

Свойство background-position в этом случае размещает фон под текстом, а background-repeat заставляет его повторяться.

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

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

Источник: https://lsreg.ru/podcherknutyj-tekst-na-css/

CSS эффект подчёркивания от центра и слева направо

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

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

Линия появляющаяся слева направо

  Первый CSS эффект который я покажу, это плавно появляющаяся слева направо подчёркивающая линия.

Демо — наведите курсор на один из пунктов ниже:

  Для примера я взял простую по html конструкцию — родительский элемент с классом link-hover-solid, внутри которого идут ссылки — a. Как правило, по такому же принципу устроено меню на сайтах с его пунктами.

HTML-код:

FontAwesome Генератор кнопок

CSS-код отвечающий за анимацию:

.link-hover-solid a { display: inline-block; color: #76431f; line-height: 1; text-decoration: none; cursor: pointer; } .link-hover-solid a:after { background-color: #ff6000; display: block; content: «»; height: 3px; width: 0%; -webkit-transition: width .3s ease-in-out; -moz—transition: width .3s ease-in-out; transition: width .3s ease-in-out; } .link-hover-solid a:hover:after, .link-hover-solid a:focus:after { width: 100%; }

Подчёркивающая линия появляющаяся из центра

  Этот эффект особо популярен для пунктов главного горизонтального меню на сайте.

Демо:

CSS-код эффекта:

.link-hover-center a { display: inline-block; color: #07aa19; line-height: 1; text-decoration: none; cursor: pointer; position: relative; } .link-hover-center a:after { display: block; content: «»; background-color: #07aa19; height: 3px; 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%); } .link-hover-center a:hover:after, .link-hover-center a:focus:after { width: 100%; }

  Чтобы внедрить данные эффекты у себя на сайте, нужно просто поменять в CSS-коде классы родительского элемента, на классы со своего сайта.

  Если у вас есть вопросы — можете оставлять вопросы в комментариях. Ну а если вы не можете сделать это самостоятельно (опасаетесь всё сломать), то я могу вам помочь за кружечку капучино и реализовать для вас данный эффект.

Источник: https://inter-net.pro/css/effekt-podchjorkivaniya

Выделение текста: жирным, курсивом, подчеркнутым и зачеркнутым стилями

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

Выделение жирным:

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

Сейчас открываем наш файл index_3.html в Блокноте. У кого его нет скачиваем здесь в формате index_3.rar. Вписываем указанные теги в первые строчки стихотворения, как показано на картинке Screen 1. Как всегда «Сохраняем».

Полученный файл                                                                                                              Screen 1

 «Открываем» в браузере.

Что мы видим? На Screen 2 показано, что все три строчки выделены жирным, в каких бы вариантах

                                                                                                              Screen 2

 не были вставлены теги. Кроме того мы открывали этот файл в Opera и Firefox. Результат тот же. Текст в них отражается нормально. Можете проверить сами. Не будем вдаваться в подробности и забивать себе голову лишним: почему?, что? и как?

           Внимание! Еще раз повторяем, что наш курс «упрощенный», для начинающих. Он дает только «основные» навыки и понятия html построения. Но это не значит, что он неправильный.

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

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

Выделение курсивом:

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

Вставляем,   как  в предыдущем  примере,   в разных вариантах теги курсива в наш файл.    1. Заключаем фамилию автора в тег .
2. Делаем курсивом две нижние строчки стихотворения, Screen 3. Смотрим что получилось, Screen 4.

                                                                                                    
                                                                  

Screen 3.
                                                                   Screen 4.

Важно

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

Подчеркнуть и зачеркнуть текст:

Здесь все делаем как в предыдущих разделах. Подчеркиваем зоголовок стихотворения используя тег . Зачеркиваем оставшиеся строчки стиха тегами и . Смотрим Screen 5 и Screen 6.                                                                                                     Screen 5.
                                                                    Screen 6.

       Все выше изложенные теги  прошли проверку на интернет-обозревателях Ни каких искажений показа на экране не отмечено.

Дополнительные сведения об отдельных тегах, тем кому потребуются более точная информация, можно получить в «Cправочнике  html».

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

          На последок переименуем Копию i, в файл и Сохраним. 
 

Источник: http://luksucheba.ucoz.ru/publ/osnovy_html_dlja_nachinajushih/vydelenie_teksta_zhirnym_kursivom_stiljami/16-1-0-91

4 способа сделать нижнее подчеркивание для ссылок | Типичный верстальщик

В этой статье мы разберем несколько способов сделать нижнее подчеркивание текста. Два из них — самые популярные, остальные два не так очевидны, но имеют значительное преимущество. Какое? Об этом поговорим ниже. Итак, поехали!

text-decoration

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

и дополнительные содержание

Что нужно сделать?

HTML:

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

CSS:

a { text-decoration: underline; }

border-bottom

Этот метод тоже можно отнести к стандартному. Многие его применяют, когда хотят отделить подчеркивание от текста. Наглядный пример:

и дополнительные содержание

Что нужно сделать?

HTML:

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

CSS:

a { border-bottom: 1px solid #268ccc; }

Однако рассмотренные методы имеют 2 минуса:

• в первом случае: подчеркивающая линия находится слишком близко к нужному тексту;
• во втором случае: подчеркивающая линия находится слишком далеко от нужного текста.

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

a>span

Смысл этого метода в стилизации дочернего элемента span. А это значит, что внутри тега a, необходимо добавит тег span. Давайте посмотрим как это выглядит:

и дополнительные содержание

Что нужно сделать?

HTML:

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

CSS:

a { font-size: 50%; border-bottom: 1px solid #268ccc; } a>span { font-size: 200%; line-height:normal; }

linear-gradient

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

и дополнительные содержание

Стоит заметить, что цвет линии становится не такой яркий, это нужно учесть для дизайна. «Отдалненность» линии от текста возможно регулировать за счет background-position.
Давай рассмотрим как сделать такое подчеркивание:

HTML:

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

CSS:

a { background: 0 0; background: -moz-linear-gradient(top,rgba(0,0,0,0) 0,#268ccc 100%); background: -webkit-linear-gradient(top,rgba(0,0,0,0) 0,#268ccc 100%); background: -o-linear-gradient(top,rgba(0,0,0,0) 0,#268ccc 100%); background: -ms-linear-gradient(top,rgba(0,0,0,0) 0,#268ccc 100%); background: linear-gradient(to bottom,rgba(0,0,0,0) 0,#268ccc 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=transparent, endColorstr=#268ccc, GradientType=0); background-repeat: repeat-x; background-position: 0 100%; background-size: 1px 1px; text-decoration: none; }

Заключение

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

text-decoration:

и дополнительные содержание

border-bottom:

и дополнительные содержание

a>span:

и дополнительные содержание

linear-gradient:

и дополнительные содержание

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

Источник: https://tpverstak.ru/underline-text/