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

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

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

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

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

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

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

Подходы

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

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

  • text-decoration;
  • border-;
  • 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-

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

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

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

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

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

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

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

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

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

box-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

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

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

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

Следующий вариант обходится без linear-gradient, для эффектов вы можете добавить свое фоновое изображение.

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

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

Фильтры SVG

Я достаточно много поиграл с этим способом. Вы можете создать строчный фильтр 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:

Подчеркивание текста при помощи фильтров SVG

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

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

Underline.js (Canvas)

Underline.js завораживает. Я считаю впечатляющим то, что сделала Вентин Жанг за счет владения JavaScript и внимания к деталям. Если вы не видели техническое демо Underline.js, бросайте читать и уделите ему минуту времени. Есть также ее девятиминутный доклад о том, как это работает, но я опишу кратко: подчеркивание рисуется с помощью элементов <canvas>. Это новый подход, который работает на удивление хорошо.

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

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

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

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

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

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

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

text-decoration-color

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

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

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

text-decoration-skip

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

подчеркивание с text-decoration-skip в Safari

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

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

text-decoration-style

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

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

  • dashed
  • dotted
  • double
  • solid
  • wavy

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

образец работы text-decoration-style

Чего не хватает

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

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

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

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

Выводы

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

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

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

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

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

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

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

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

Подчеркивание ссылок и текста через CSS, свойство text-decoration

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

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

Раньше, помнится, поддержка данной опции в стилях была очень слабая, многие браузеры вообще ее не воспринимали. Сейчас ситуация улучшилась, хотя вы все еще рискуете получить неожиданный результат на старых версиях или в IE. Вероятно, совсем скоро наступит время, когда мы сможем задавать однозначное и корректное подчеркивание HTML ссылок / текстов без применения border-. Хотя в одном из примеров прошлой статьи (онлайн журнале Wired) именно оно используется при реализации тренда:

Но вернемся к нашему уроку по верстке и более традиционному методу.

Опиця text-decoration для подчеркивание текста в CSS

Ранее она принимала одно из базовых значений:

  • line-through &#8212; перечеркнутый текст;
  • underline &#8212; нижнее подчеркивание;
  • overline &#8212; линия сверху;
  • none &#8212; без оформления (отмена всех эффектов);
  • inherit &#8212; наследуется.

Однако в новой редакции стилей предлагаются несколько иные свойства:

  • text-decoration-color &#8212; задание цвета;
  • text-decoration-style &#8212; стиль подчеркивания текста / ссылок;
  • text-decoration-line &#8212; тип линии (из 5-ти вариантов выше);

Для свойства text-decoration вы можете использовать сразу несколько значений параметров, перечисляя их в одной строке. Рассмотрим их по отдельности…

text-decoration-color &#8212; CSS цвет подчеркивания ссылки

Эта опция максимально простая и здесь, в принципе, нечего особо объяснять.

В качестве значение вводите код веб-цвета.

text-decoration-line &#8212; расположение линии оформления текста

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

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

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

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

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

text-underline-position &#8212; позиционирование CSS подчеркивания

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

Всего доступны 4 варианта:

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

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

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

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

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

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

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

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

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

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

Если ссылка декоративно выделена с помощью линии, то вам нужно найти CSS стиль, в котором прописывается свойство text-decoration и заменить его значение на «none»:

Тут важно правильно определить где именно в задается оформление вашему элементу. У него могут быть сторонние классы и другие дополнительные конструкции (не только тег a). Смотрите как мы реализовали это в примере ниже &#8212; абзац с классом «nounder».

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

В CSS для этих целей содержится так называемый псевдокласс hover &#8212; по теме есть большая детальная статья о создании hover эффекта в кнопках / картинках и не только (советуем глянуть). Если говорить вкратце, то вам просто нужно прописать обработку события:

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

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

Подчеркнуть ссылку, удалить подчеркивание, border в качестве подчеркивания примеры !

Как добавить подчеркивание ссылки, как убрать подчеркивание ссылки, подчеркнуть ссылку через css? добавить подчеркивание с помощью css, изменить цвет подчеркивания ссылки! В общем все, что касается подчеркивания ссылок , как с подчеркиванием работать, стили по умолчанию и т.д.

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

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

Поскольку наша ссылка не имеет исходного состояния, нам придется вывести стили ссылки с подчеркиванием по умолчанию! Мы делали пример страницы с цветами ссылки , там же можно посмотреть и подчеркивание ссылки по умолчанию!

Мы сделаем отдельный класс чтобы увидеть это подчеркивание по умолчанию прямо на даннйо странице!

Здесь мы видим, что есть некое свойство text-decoration, которое имеет значение underline &#8212; если вы изучали английский(и тут сразу про себя: вот же дурень! Нужно было учить английский в школе!)

Поскольку я учился и на &#171;инфаке&#187;, то мне и задумываться не нужно&#8230; перевод: декорирование текста : подчеркивание&#8230;, но и если разложить слово under и + line переводится &#8212; под линией

Ну и плюс&#8230; вообще не красивое подчеркивание, каждая буква, которая имеет выступ за линию, разрывает подчеркивание! Это например буква у

Следующим пунктом уберем подчеркивание у ссылки!

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

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

И добавим такой этот класс нашей ссылке

<a ссылки с удаленным подчеркивание ссылки!</a>

Результат удаления подчеркивания у ссылки через css

Чтобы это правило распространялось на все ссылки на сайте нужно написать просто без класса

Если нужно чтобы подчеркивание убиралось в определенном блоке, то выбираем блок, например этот блок, в котором написаны данные строки, имеет ид >

При наведении на ссылку &#8212; убрать подчеркивание

Но мы хоти удалить подчеркивание не на всегда, а лишь тогда, когда мышка будет сверху ссылки! Как убрать подчеркивание при наведении на ссылку!

Давайте это сделаем! Нам понадобится псевдо класс :hover

Чтобы нам продемонстрировать убирание ссылки при наведении нам понадобится новая ссылка и новый класс

<a удаления подчеркивания ссылки при наведении мышки</a>

Далее к классу с ссылкой добавляем псевдо класс hover

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

При наведении на ссылку &#8212; добавить подчеркивание

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

Результат добавления ссылки при наведении мышки:

Бордюр в качестве подчеркивания ссылки

Часто используют свойство border для подчеркивая ссылки! Зачем! Как я выше уже написал, то подчеркивание text-decoration: underline; ломается о длинные буквы, например д, чтобы избавиться от этого нам и понадобится бордюр под ссылкой:

border-: 1px solid red;

Чтобы увеличить зазор между ссылкой и подчеркиванием используем padding-

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

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

Далее добавляем цветную линию под ссылкой:

border-: 1px solid red;

Соберем стили для цветного подчеркивания ссылки:

border-: 1px solid red;

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

Убрать бордюр под ссылкой при наведении

Для того, чтобы убрать уже существующий бордюр под ссылкой нужно в hover нужно поставить border-: none; либо просто border: none;

border-: 1px solid red;

Результат, как убрать подчеркивание свойства border:

Изменить цвет подчеркивания под ссылкой при наведении

Изменить цвет подчеркивания при наведении &#8212; в hover в border-: 1px solid red; red меняем на black.

Как подобрать цвет

Как переводится слово solid

Одно из значений слова &#171;solid&#187; &#8212; сплошной. Поэтому, линия подчеркивания будет сплошной.

Толщина линии подчеркивания ссылки сделаем в пикселях &#8212; 1px.

Цвет подчеркивания красный &#8212; red.

Как подобрать цвет

border-: 1px solid red;

border-: 1px solid black;

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

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

Следующим пунктом рассмотрим пунктирное подчеркивание ссылки.

Возьмем выше приведенный пример и заменим solid .

Цвет подчеркивания задаем в свойстве &#171;border&#187;

Как подобрать цвет

Как переводится dashed

Одно из значений слова &#171;dashed&#187; -пунктирный.

border-: 1px dashed red;

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

Плавное подчеркивание ссылки при наведении css

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

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

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

У меня есть два тега <a> , и мне нужно, чтобы они были подчеркнуты вот так: (обратите внимание, что я не могу использовать border-bottom: dashed 10px , потому что линии тонкие, но пространство между ними довольно большое.

my text

5 ответов

Чтобы подчеркнуть текст в CSS, мы можем сделать: h3 Однако это только подчеркивает текст, заключенный в тег h3. Что делать, если вы хотите, чтобы подчеркивание шло по всей странице? Спасибо

Я совершен CSS нуб Не могли бы вы уделить мне минутку и помочь создать пунктирное подчеркивание (с пробелом) с изменением цвета текста при наведении мыши? Я был бы очень признателен вам за помощь! http://i.imgur.com/2JjFYWT.jpg http://codepen.io/anon/pen/lIjDp (пожалуйста, не обращайте внимания на.

Существует 2 подхода, но этот подход будет заключаться в использовании border-bottom: value;

Если вы хотите использовать какой-то другой стиль, этого не произойдет. Как и пространство, о котором ты говоришь. Тогда вы, скорее всего, будете использовать изображение для нижней границы и создадите border-like-effect.

Если вы можете дать якорю атрибут position:relative , я бы использовал абсолютно позиционированный псевдоэлемент. Вы можете использовать фоновое изображение или линейный градиент, как я сделал в своей демо-версии

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

Это все, что вам нужно 🙂

Редактировать

Что вам нужно, так это добавление свойства min-width , добавленного к вашему <a> styles.check демо-версии

Вот метод, который я использовал в прошлом. Он использует псевдоэлемент, который действует как граница.

Отрегулируйте положение границы псевдоэлемента относительно элемента, отрегулировав его нижнее положение.

Можно ли с помощью CSS сделать подчеркивание заголовка менее широким, чем текст заголовка? У меня есть следующий стиль для заголовка H1: h1 < font-weight: 300; display: inline-block; padding-bottom: 5px; border-bottom: 1px #d2202f solid; >Это создает тонкое красное подчеркивание под моими.

У меня есть следующее HTML <div style=text-decoration: underline;> outer text <div style=text-decoration: none;>inner text</div> </div> Несмотря на то, что я использовал none для внутреннего текста, он все еще подчеркнут. Вот пример JS fiddle: http://jsfiddle.net/oj2wj1d6/1.

Похожие вопросы:

Как мы можем создать двойное пунктирное подчеркивание в CSS ? Я использую свойство border-bottom. border-bottom: 1px dotted #oof Но появляется только одно пунктирное подчеркивание. Как мы можем.

Я хотел бы иметь подчеркивание только для текста и в то же время сохранить часть изображения ссылки: <!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN.

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

Чтобы подчеркнуть текст в CSS, мы можем сделать: h3 Однако это только подчеркивает текст, заключенный в тег h3. Что делать, если вы хотите, чтобы подчеркивание шло по.

Я совершен CSS нуб Не могли бы вы уделить мне минутку и помочь создать пунктирное подчеркивание (с пробелом) с изменением цвета текста при наведении мыши? Я был бы очень признателен вам за помощь.

Можно ли с помощью CSS сделать подчеркивание заголовка менее широким, чем текст заголовка? У меня есть следующий стиль для заголовка H1: h1 < font-weight: 300; display: inline-block; padding-bottom.

У меня есть следующее HTML <div style=text-decoration: underline;> outer text <div style=text-decoration: none;>inner text</div> </div> Несмотря на то, что я использовал none.

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

Я пытаюсь добавить подчеркивание к одному из символов в plt.text. plt.text(.5,.5,r’\underlineH’) Это, кажется, не работает , я попытался использовать \overline, который работает просто.

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

_ &#8211; Нижнее подчёркивание: U+005F lowbar &#8211; Таблица символов Юникода

Стандартный метод хорош, но лишь для ограниченного количества возможностей. Так, с помощью этого метода невозможно изменять стиль линии. Также такое подчеркивание плохо выглядит на большом размере шрифта. Кроме этого, он не пропускает нижние выносные элементы почти в любом браузере (исключение – 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 заставляет его повторяться.
Вместо градиента можно использовать готовое фоновое изображение и реализовать, например, подчеркивание звездочками.


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

Подчеркнутый текст через html тег <u> и <ins>

Весь текст заключенные в теги <u></u> и <ins></ins> становится подчеркнутым.

Название <u></u> пришло от английского слова &#8220;underline&#8221;. Html тег <ins></ins> считается более новым.

< p > Обычный текст. < u > Подчеркнутый текст через тег u < /u >< /p >< p > Обычный текст. < ins > Подчеркнутый текст через тег ins < /ins >< /p >

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

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

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

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

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

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

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

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

text-decorashion

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

  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)

text-decoration

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *