Как сделать подчёркивание заголовка? | WebReference
Подчёркивание бывает разного вида, соответственно, различаются методы его создания. Ниже перечислены несколько популярных.
Использование text-decoration
Свойство text-decoration со значением underline добавляет подчёркивание к тексту; такого рода подчёркивание можно наблюдать для ссылок по умолчанию. Созданная таким образом линия равна ширине текста и будет такого же цвета, что и сам заголовок. Изменить цвет линии можно через свойство text-decoration-color. В примере 1 показано применение text-decoration к элементу <h3>.
Пример 1. Использование text-decoration
<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Подчёркивание</title> <style> h3 { text-decoration: underline; /* Добавляем подчёркивание */ text-decoration-color: red; /* Цвет линии */ } </style> </head> <body> <section> <h3>Культурный речевой акт в XXI веке</h3> <p>Действительно, мифопорождающее текстовое устройство иллюстрирует дискурс, и это придает ему свое звучание, свой характер.</p> </section> </body> </html>Рис. 1. Вид линии, созданной через text-decoration
Браузеры IE и Edge не поддерживают свойство text-decoration-color.
Использование border-bottom
Свойство border-bottom добавляет к элементу снизу линию заданной толщины, цвета и стиля. Такая линия занимает всю доступную ширину, несмотря на длину текста заголовка (рис. 2).
Рис. 2. Вид линии, созданной с помощью border-bottom
Расстояние от линии до текста можно регулировать с помощью свойства padding-bottom, как показано в примере 2.
Пример 2. Использование border-bottom
<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Подчёркивание</title> <style> h3 { border-bottom: 2px solid red; /* Добавляем подчёркивание */ padding-bottom: 5px; /* Расстояние от текста до линии */ } </style> </head> <body> <section> <h3>Культурный речевой акт в XXI веке</h3> <p>Действительно, мифопорождающее текстовое устройство иллюстрирует дискурс, и это придает ему свое звучание, свой характер.</p> </section> </body> </html> Чтобы линия была на ширину текста, достаточно заголовок превратить в строчно-блочный элемент, добавив к селектору h3 свойство display со значением inline-block.Использование ::after и content
Также можно сделать искусственную линию через комбинацию свойства content и псевдоэлемента ::after. Они лишь будут выводить пустой псевдоэлемент после заголовка, а уже вид этого псевдоэлемента определяется другими свойствами. На рис. 3 показана подобная линия.
Рис. 3. Линия, созданная через ::after
Положение такой линии относительно текста задается через свойство bottom с отрицательным значением, цвет линии через свойство background. На деле это получается не линия, а прямоугольный блок, поэтому используем фоновую заливку (пример 3).
Пример 3. Использование ::after
<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Подчёркивание</title> <style> h3 { position: relative; /* Относительное позиционирование */ display: inline-block; /* Линия на ширину текста */ } h3::after { content: ‘; /* Выводим пустое содержимое */ position: absolute; /* Абсолютное позиционирование */ background: red; /* Цвет линии */ left: 0; /* Положение линии слева */ bottom: -5px; /* Положение линии */ width: 100%; /* Линия на ширину текста */ height: 2px; /* Высота линии */ } </style> </head> <body> <section> <h3>Культурный речевой акт в XXI веке</h3> <p>Действительно, мифопорождающее текстовое устройство иллюстрирует дискурс, и это придает ему свое звучание, свой характер.</p> </section> </body> </html>Автор и редакторы
Автор: Влад МержевичПоследнее изменение: 05.10.2018
Редакторы: Влад Мержевич
CSS — Подчеркивание текста, но игнорирование пробелов
У меня есть пара ссылок с левым краем 3px. Эти ссылки подчеркнуты и выглядят так:
<a href='#'>
test
</a>
К сожалению, внутри ссылки есть пробелы, и я не могу удалить их, так как у меня нет доступа к коду HTML. Эти пробелы также подчеркнуты, что меня не устраивает. Есть ли способ удалить их, не меняя HTML?
Вот fiddle, который показывает мою проблему: http://jsfiddle.net/e8quz /
Обновление:
Вот картинка, как я хочу, чтобы она выглядела:
Поделиться Источник Matt3o12 20 апреля 2014 в 13:16
3 ответа
- CSS проблема оформления текста
У меня есть текстовое поле, которое было гиперссылкой, и проблема в том, что я пытаюсь удалить подчеркивание из текста гиперссылки. Параметр text-decoration:none; должен удалить его, но он, похоже, не работает. Как я могу удалить это подчеркивание из текста с гиперссылкой? HTML : <a…
- CSS эффект при наведении курсора (пунктирное подчеркивание + изменение цвета текста)
Я совершен CSS нуб Не могли бы вы уделить мне минутку и помочь создать пунктирное подчеркивание (с пробелом) с изменением цвета текста при наведении мыши? Я был бы очень признателен вам за помощь! http://i.imgur.com/2JjFYWT.jpg http://codepen.io/anon/pen/lIjDp (пожалуйста, не обращайте внимания на…
6
Пробелы берутся из разрывов строк (хорошо известных из display:inline-block
проблемных).
Поэтому сделайте свои a
элементов display: block
и переместите их влево.
DEMO
PS: display:block
-это «redundant», так как float
обычно уже устанавливает свойство отображения соответствующего элемента в «block». Но это не повредит …!
Поделиться Netsurfer 20 апреля 2014 в 13:36
2
Смотрите здесь: http://jsfiddle.net/BWc2U/2/
Это также решит проблему. Нет необходимости делать их поплавками, с поплавками вам нужно очистить поплавки, иначе все содержимое после этого также будет плавающим и т. Д…
a {
margin-left: 5px;
display: inline-block;
}
Поделиться JohanVdR 20 апреля 2014 в 13:42
1
Вы можете просто перемещать ссылки, чтобы пустое пространство исчезло, не редактируя html
a {
margin-left: 5px;
float: left;
}
http://jsfiddle.net/e8quz/2/
Поделиться Anshul Sao 20 апреля 2014 в 13:43
Похожие вопросы:
Как создать двойное пунктирное подчеркивание для текста в css
Как мы можем создать двойное пунктирное подчеркивание в CSS ? Я использую свойство border-bottom. border-bottom: 1px dotted #oof Но появляется только одно пунктирное подчеркивание. Как мы можем…
Ограничьте подчеркивание текста
Я хотел бы иметь подчеркивание только для текста и в то же время сохранить часть изображения ссылки: <!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN…
CSS слишком длинное подчеркивание текста при применении интервала между буквами? Всякий раз, когда letter-spacing применяется к чему-то с подчеркиванием или нижней границей, кажется, что подчеркивание выходит за пределы текста справа. Есть ли какой-нибудь способ сделать так,…
CSS проблема оформления текста
У меня есть текстовое поле, которое было гиперссылкой, и проблема в том, что я пытаюсь удалить подчеркивание из текста гиперссылки. Параметр text-decoration:none; должен удалить его, но он, похоже,…
CSS эффект при наведении курсора (пунктирное подчеркивание + изменение цвета текста)
Я совершен CSS нуб Не могли бы вы уделить мне минутку и помочь создать пунктирное подчеркивание (с пробелом) с изменением цвета текста при наведении мыши? Я был бы очень признателен вам за помощь!…
CSS подчеркивание меньше ширины заголовка?
Можно ли с помощью CSS сделать подчеркивание заголовка менее широким, чем текст заголовка? У меня есть следующий стиль для заголовка h2: h2 { font-weight: 300; display: inline-block; padding-bottom:…
CSS: удалить подчеркивание из текста
У меня есть следующее HTML <div style=text-decoration: underline;> outer text <div style=text-decoration: none;>inner text</div> </div> Несмотря на то, что я использовал none…
CSS подчеркивание исчезает при использовании непрозрачности
В текущем стабильном Chrome при использовании следующего CSS, где установлена некоторая непрозрачность, подчеркивание текста исчезает. Когда непрозрачность установлена на 1 или удалена,…
matplotlib подчеркивание текста
Я пытаюсь добавить подчеркивание к одному из символов в plt.text. plt.text(.5,.5,r’\underline{O}H’) Это, кажется, не работает , я попытался использовать \overline{O} , который работает просто…
Python — PDFTables синтаксический анализ игнорирование пробелов между столбцами
Я пытаюсь разобрать таблицы pdf с помощью библиотеки pdftables python. Но это объединение столбцов и игнорирование пробелов. Вот мой код: pdf_page = get_pdf_page(fileobj, page) tables =…
подчеркивание ссылок – Полезное для разработчика
От автора: перед тем, как прийти к вопросу как стилизовать подчеркивание ссылок, мы должны ответить на вопрос: нужно ли нам подчеркивание? В графическом дизайне подчеркивания обычно рассматриваются как примитивный элемент. Есть более красивые способы сделать акцент, установить иерархию и разграничить названия.
«Практическая типография» на Butterick: Если вы чувствуете желание акцентировать что-то, используйте жирный шрифт или курсив. В особых ситуациях, таких как заголовки, вы также можете рассмотреть возможность использования всех заглавных букв, маленьких заглавных букв или изменения толщины. Не уверены? Я предлагаю вам найти книгу, газету или журнал, в которых акцентируется текст.
Но в Интернете все по-другому. Гиперссылки являются важной частью Интернета; и с самого начала интернета они были подчеркнуты. Это общепризнанное соглашение. Значение кристально ясно — подчеркивание означает ссылку.
Тем не менее, большое количество популярных веб-сайтов убрало подчеркивание: The New York Times, New York Magazine, The Washington Post, Bloomberg, Amazon, Apple, GitHub, Twitter, Wikipedia. Когда в 2014 году Google удалили подчеркивания со страницы результатов поиска, их ведущий дизайнер Джон Уайли заявил, что это создало более чистый вид. Тем не менее, на большинстве этих сайтов сохранилось с небольшими различиями выделение традиционным сине-голубым цветом (#0000EE), который был цветом браузера по умолчанию с самого начала Интернета. Хотя это обеспечивает для большинства пользователей визуальную подсказку, этого может быть недостаточно для обеспечения соответствия доступности WCAG.
Цвет не должен использоваться в качестве единственного визуального средства передачи информации, указания действия, запроса ответа или различения визуального элемента. — WCAG 2.1
WCAG не обязывает строго использовать подчеркивания для ссылок, но рекомендует их. Пользователи-дальтоники должны иметь возможность различать ссылки. Вы можете выделить их другими способами, например, жирным шрифтом font-weight. Или вы могли бы сохранить эту старую визуальную доступность. Но если мы собираемся использовать подчеркивание, мы хотим, чтобы оно выглядело красиво. Марчин Вичари, дизайнер из Medium, описал идеальное подчеркивание как:
[…] видимое, но ненавязчивое — позволяющее людям понять, на что можно нажимать, но не обращающее на себя слишком много внимания. Оно должно располагаться на правильном расстоянии от текста, удобно помещаясь позади текста, когда это же место должны занять выступающие части букв.
Для достижения этого традиционно требовались хитрости CSS.
Хаки, которые мы использовали
С этим трюком должны быть знакомы все разработчики — с помощью :border-bottom. Имитируя подчеркивание с помощью border-bottom, мы получаем контроль над цветом и толщиной. Эти псевдо-подчеркивания имеют одну проблему: слишком большое расстояние от текста. Вы могли бы потенциально решить эту проблему с помощью line-height, но и это имеет свои недостатки. Аналогичная техника использует box-shadow. Марчин Вичари впервые применил самую сложную технику, которая использовала background-image для имитации подчеркивания. Это были полезные хаки, но, к счастью, они больше не нужны.
Стилизация реальных подчеркиваний
Наконец, мы можем обозначить ссылки без ущерба для стиля благодаря двум новым свойствам CSS.
text-underline-offset контролирует положение подчеркивания.
text-decoration-thickness контролирует толщину подчеркивания.
Согласно блогу WebKit: Вы также можете указать from-font для обоих этих свойств, что задает получение соответствующего показателя из файла используемого шрифта.
UX- агентство Clearleft смело использует (псевдо) подчеркивания, четко обозначая ссылки с помощью красочных стилей. Вот один из примеров искусственного подчеркивания:
a { text-decoration: none; border-bottom: #EA215A 0.125em solid; }
Обратите внимание, что это псевдо-подчеркивание явно ниже выступающей части буквы «у»:
Вот тот же параграф при использовании DevTools для применения того же стиля к реальному подчеркиванию с новыми свойствами CSS:
a { text-decoration-color: #EA215A; text-decoration-thickness: .125em; text-underline-offset: 1.5px; }
Вы заметили, что я использую в этом примере кода единицу em. Спецификация настоятельно рекомендует использовать ее, а не пиксели, чтобы толщина соответствовала шрифту. Эти свойства уже реализованы в Safari и появятся в Firefox 70.
С переходом браузера Microsoft Edge на Chromium мы, наконец, получим кросс-браузерную поддержку для свойства text-decoration-style, которое предлагает варианты: solid (по умолчанию), double, dotted, dashed и wavy. В сочетании эти новые свойства открывают целый ряд возможностей.
Возможно, это самое большое обновление для подчеркивания в Интернете, и при этом разработчикам нет необходимости что-либо делать. В старые добрые времена выступающие части букв бесцеремонно обрезались подчеркиванием, что было далеко не элегантно. Разработчики привыкли обходить этот недостаток, применяя text-shadow соответствующий цвету фона. text-decoration-skip-ink дает лучший способ создать разрывы подчеркивания вокруг выступающих частей.
Значение по умолчанию auto (слева) и значение none (справа)
Удобно, это установлено как новое значение по умолчанию для подчеркиваний; это означает, что внешний вид подчеркиваний улучшился, в то время как большинство веб-разработчиков даже не знают, что это свойство существует. Если вы хотите, чтобы подчеркивание пересекало выступающие части букв, вы можете установить для этого свойства — none.
Автор: Ollie Williams
Источник: https://css-tricks.com
Редакция: Команда webformyself.
Источник: https://webformyself.com/stilizaciya-podcherkivanie-ssylok/
Как в CSS убрать подчеркивание ссылки
Здравствуйте, дорогие друзья!
Давайте сегодня решим такую проблему, как стилизация ссылок на страницах вашего сайта, а именно как в CSS убрать подчеркивание ссылки. Данный вопрос в большинстве случаев возникает у начинающих веб-разработчиков и у тех людей, которые не особо разбираются в CSS, но хотят внести некоторые изменения в оформление своего сайта.
Навигация по статье:
Смотря на какой CMS работает ваш сайт, и какую тему вы используете, могут возникнуть различные варианты оформления ссылок, и соответственно могут возникнуть различные варианты, как вы можете убрать подчеркивание ссылки в CSS. Давайте рассмотрим основные из них.
Отключаем подчеркивание
Чтобы в CSS убрать подчеркивание ссылки нам нужно воспользоваться специальным CSS-свойством text-decoration со значением none, которое нужно прописать в файле стилей нашего сайта для ссылки.
Вот как это будет выглядеть на примере для ссылок размещенных в блоке с классом .link-blok:
.link-blok a{ text-decoration:none; }
.link-blok a{ text-decoration:none; } |
Вместо .link-blok вам нужно указать селектор вашего блока (класс или индентификатор) внутри которого находится ссылка для которой нужно убрать подчёркивание.
Для того чтобы узнать название селектор блока, в котором находится ссылка нужно проинспектировать код при помощи встроенных инструментов браузера. Как это сделать вы можете найти в этой статье с видео инструкцией: Как определить ID и класс элемента на странице?Если вам нужно убрать подчёркивание ссылки для всех ссылок на сайте, то в CSS пишем:
a{ text-decoration:none; }
a{ text-decoration:none; } |
Убираем подчеркивание ссылки CSS при наведении
Если же у вас изначально ссылки не имеют подчеркивания, и это подчеркивание появляется при наведении указателя мышки, то вам нужно указывать немного другой селектор, а именно:
.link-blok a:hover{ text-decoration:none; }
.link-blok a:hover{ text-decoration:none; } |
В этом случае мы дописали к селектору псевдокласс hover, который как раз и позволяет задать стили для элемента при наведении указателя.
Используя показанные в данной статье стили, вы сможете с легкостью убрать или добавить подчеркивание для ссылок на вашем сайте. Если у вас возникнут вопросы, вы всегда можете задать их в комментария.
Если статья была для вас полезной делитесь ей в социальных сетях и подписывайтесь на мою рассылку.
Желаю вам успехов в оформлении вашего сайта! До встречи в следующих статьях!
С уважением Юлия Гусарь
Как в css убрать подчеркивание ссылки
Как на сайте убрать подчеркивание ссылок на CSS?
Исторически сложилось так, что при обработке веб-документа браузеры подчеркивают и выделяют особым цветом гиперссылки. Это может серьезно нарушать дизайнерскую задумку и портить внешний вид сайта. Веб-мастер может применить специальные инструкции CSS и убрать подчеркивание ссылки, чтобы красиво вписать ее в страницу.
Зачем подчеркивают ссылки?
С самого зарождения всемирной паутины гиперссылки имеют особенное значение. Именно они выполняют важнейшую функцию объединения миллионов разных веб-документов в одну сеть.
Особый статус элемента определил необходимость его выделения на странице каким-либо способом. Чтобы ссылка не сливалась с остальным текстом (который изначально был просто черным), решено было ее подчеркивать и раскрашивать синим цветом. Кроме того, были добавлены эффекты при наведении мыши (исчезновение подчеркивания, изменение курсора) и изменение цвета уже посещенных ссылок.
Вот так выглядели первые интернет-сайты:
Гиперссылки сразу выделяются на фоне окружающего текста.
Такое поведение элементов закрепилось, и браузеры стали применять его по умолчанию.
Выделение ссылок
С развитием CSS появилось множество возможностей сделать ссылочный элемент заметным, не прибегая к подчеркиванию. Более того, в ряде случаев эта тонкая линия стала нежелательной, так как не вписывалась в дизайн веб-страницы.
Верстальщикам нужна была возможность с помощью CSS убрать нижнее подчеркивание ссылок, например, в главном меню сайта и сайдбарах.
Таким образом, сохранилась основная идея, устанавливающая, что гиперссылка должна быть заметной, но способ ее реализации по умолчанию не всегда соответствовал потребностям.
Изменение стиля гиперссылки
Убрать подчеркивание ссылки на CSS очень просто. Для этого существует специальная инструкция text-decoration. Она заведует оформлением фрагмента текста с помощью горизонтальной линии и определяет ее конкретное расположение.
Список значений, которые может принимать это свойство:
- underline – нижнее подчеркивание;
- overline – верхнее подчеркивание, линия проходит над текстом;
- line-through – зачеркивание, линия проходит посередине строки;
- none – отсутствие оформления.
По умолчанию браузеры применяют к гиперссылкам инструкцию text-decoration: underline. Очевидно, что нас интересует значение none. Оно позволяет обнулить ранее примененные стили, а также сбросить оформление по умолчанию.
Чтобы убрать подчеркивание ссылки на CSS, следует применить к ней следующее правило:
a { text-decoration: none;
}
Как с помощью css убрать подчеркивание ссылки по умолчанию
Приветствую вас на страницах этого сайта. Ссылки в html имеют определенные стили по умолчанию – обычно они синего цвета и с подчеркиванием. Так будет, если не настроить для них свои стили. Поэтому я предлагаю рассмотреть вопрос, как в css убрать подчеркивание ссылки по умолчанию, потому что это не всегда нужно.
Убираем подчеркивание
Итак, для этого нам нужно ссылкам прописать такое правило:
A{ Text-decoration: none; }Свойство text-decoration отвечает за то, будет ли к тексту применено подчеркивание. Чтобы подчеркнуть информацию снизу нужно написать значение underline, подчеркнуть сверху – overline и даже зачеркнуть – line-through.
Соответственно, значение none позволяет убрать всякие подчеркивания вовсе. Однако помните, что ссылки в любом случае должны быть выделены не так, как обычный текст, чтобы пользователи их хорошо видели и могли по ним перейти.
Можно также реализовать такой эффект, чтобы по умолчанию подчеркивания не было, а при наведении на ссылку оно появлялось. Для этого нам понадобится псевдокласс hover. Вот статья о его использовании.
A{ Text-decoration: none; } A:hover{ Text-decoration: underline; }Вообще к ссылкам можно применить много интересных эффектов, некоторые самые простые я описал здесь.
В этих примерах кода мы с вами убирали подчеркивание у всех ссылок на странице, но это не всегда нужно. Просто используйте нужный селектор, чтобы обратиться к определенным элементам. Можно привязать стилевые классы, а если ссылка имеет большую важность, то даже идентификатор. Смотрите статью о css селекторах, чтобы лучше с ними разобраться.
Как убрать подчеркивание ссылок? CSS свойство text-decoration
Ссылки – неотъемлемая часть любой веб-страницы. Они могут быть как текстовыми, так и в виде кнопок. В этой статье будут рассмотрены только текстовые ссылки.
Ни для кого не секрет, что в HTML все элементы выглядят не очень аккуратно, да и дизайн, откровенно говоря, плохой.
Самой главной частью «линка», которая и мешает при создании ссылки, является нижнее подчеркивание. Сейчас разберемся в том, как убрать подчеркивание ссылки в CSS.
Создание ссылки
Для демонстрации работы этого метода, необходимо создать ссылку. В этом поможет стандартный HTML 5.
Чтобы создать ссылку, нужно использовать парный тег «a», который не является блочным. Поэтому, чтобы размещать ссылки на отдельных строчках, необходимо заключать их в теги параграфа (p). Можно воспользоваться и альтернативным способом – задать свойство display: block для каждой ссылки.
Приступаем к созданию ссылки. Вписываем несколько тегов в наш HTML документ. Между открывающим и закрывающим тегом записываем название для нашей ссылки, которое будет отображаться на нашей странице.
Кроме этого, тег «a» имеет целый ряд атрибутов. Обязательным является атрибут href, без которого не будет осуществляться переход по ссылке. В нем указывается путь к странице или файлу, к которому будет вести наша ссылка.
В представленном примере не будет осуществляться переход по другим ссылкам, поэтому можно указать стандартное значение #.
Ссылка создана, теперь ее нужно стилизовать. Существует несколько способов убрать подчеркивание ссылки в CSS:
- Атрибут style (располагается внутри тега).
- Тег style (располагается в блоке head).
- Внешнее подключение стилей с помощью тега link.
Для отмены подчеркивания ссылки в CSS можно использовать любой из этих способов, но наиболее пригодным считается подключение внешних стилей.
Совет: при стилизации веб-страницы отдавайте предпочтение внешним ссылкам.
Стилизация ссылки в CSS
В представленном примере будет использоваться внешнее подключение ссылок. Открываем CSS файл, в котором и будем изменять дизайн ссылок.
Кроме ссылок, на этой странице ничего нет. Поэтому будем использовать в качестве селектора тег «a». При желании можете добавить классы для каждой ссылки, но это необязательно.
Записываем селектор «a», в котором будет прописано свойство text-decoration: none;
Одно простое свойство text-decoration используется для того, чтобы с помощью CSS убрать подчеркивание ссылки.
Text-decoration содержит ряд других значений. С его помощью можно сделать и верхнее подчеркивание, однако это используется редко.
Чтобы убрать подчеркивание ссылки, в CSS документе введите следующий код:
Чтобы упростить код, можно использовать простой атрибут – style. В примере, не представлено полноценного дизайна всей странице, поэтому можно использовать и данный способ.
Главное — не расписывать такими способами всю HTML страницу. В таком коде можно очень легко запутаться.
Изменение наведенной ссылки в CSS
Допустим, вы захотели сделать так, чтобы в обычном состоянии ссылки подчеркивание осталось, а при наведении исчезло. Чтобы убрать или задать подчеркивание для ссылки при наведении, в CSS используется псевдокласс «:hover». Вот пример:
Стили можно применять не только к наведенной ссылке, но и к активированной или посещенной. Для этого нужно использовать псевдоклассы «:active» и «:visited».
Как убрать подчеркивание ссылок? CSS свойство text-decoration на 1DriveNews.ru.
Поделитесь ссылкой и ваши друзья узнают, что вы знаете ответы на все вопросы. Спасибо ツ
Убрать подчеркивание ссылки в HTML
Вот казалось бы, что сложного убрать подчеркивание ссылки в html, в css, в общем где бы то ни было. Но бывает что стоят такие тривиальные задачи, как, убрать подчеркивание ссылки, но при наведении оно должно быть, либо наоборот, ссылка не подчеркнута, а при наведении подчеркивание пропадает. И так, самое простое.
Это убрать подчеркивание в css, или же, если вы пишите стили в прямо код html или php, то вам надо следующее (это убирает подчеркивание полностью):
Плавное подчеркивание ссылки при наведении на чистом CSS — WEB Головоломки
В это статья я расскажу, как можно сделать плавное подчеркивание ссылки на ховере. Все будет реализовано на css, без использования сторонних библиотек.
Предположим, у вас есть ссылка:
<a href="#">Как сделать плавное подчеркивание</a>
По умолчанию, это обычная ссылка, стили для которой задает браузер. Давайте это исправим.
Наш план заключается в том, что с помощью псевдоэлемента :before мы создадим линию, которая будет располагаться чуть ниже ссылки. И этой линией мы и будем в дальнейшем управлять.
Добавим вот такие стили:
a {
position: relative;
color: #484848;
font-size: 1.25rem;
text-decoration: none;
}
a::before {
content: '';
position: absolute;
left: 0; bottom: -5px;
width: 100%;
height: 1.5px;
background-color: red;
}
У вас должна была появиться красная линия под ссылкой. Это и есть наш псевдоэлемент before.
Изменим ширину этой линии. Вместо 100% зададим 0 — то есть, ее теперь не будет видно.
А затем, когда пользователь будет наводить курсор на ссылку, мы будем менять свойство width у нашего псевдоэлемента. Давайте, пропишем это:
a:hover:before {
width: 100%;
}
Итак, при наведении на ссылку появляется наша линия. Давайте зададим плавность — укажем какое свойство мы будем менять и пропишем время перехода.
a::before {
transition: width 0.35s;
}
Здесь мы указали, что переход состояния width с нуля до 100% будет длиться 0.35 секунд.
Итак, итоговый код выглядит следующим образом:
See the Pen Как сделать плавное подчеркивание для ссылки by Pelegrin (@pelegrin2puk) on CodePen.
Я показал принцип, по которому можно создавать плавное подчеркивание. Вы можете экспериментировать и менять значения. Или менять свойства. Например, вместо того, чтобы менять width с нуля до 100% поставьте значение width: 100%, но задайте, например, transform: scaleX(0), а при наведении меняйте его на scaleX(1). Пробуйте!
У нас на канале есть видео на эту тему, советуем посмотреть, если остались вопросы.
Анимированное подчеркивание текста
Пример:
Анимированное подчеркивание текстаHTML:
<div> Анимированное <span>подчеркивание<svg xmlns=»http://www.w3.org/2000/svg» viewBox=»0 0 500 150″ preserveAspectRatio=»none»> <path d=»M5,125.4c30.5-3.8,137.9-7.6,177.3-7.6c117.2,0,252.2,4.7,312.7,7.6″></path> <path d=»M26.9,143.8c55.1-6.1,126-6.3,162.2-6.1c46.5,0.2,203.9,3.2,268.9,6.4″></path></svg></span> текста </div>
<div> Анимированное <span>подчеркивание<svg xmlns=»http://www.w3.org/2000/svg» viewBox=»0 0 500 150″ preserveAspectRatio=»none»> <path d=»M5,125.4c30.5-3.8,137.9-7.6,177.3-7.6c117.2,0,252.2,4.7,312.7,7.6″></path> <path d=»M26.9,143.8c55.1-6.1,126-6.3,162.2-6.1c46.5,0.2,203.9,3.2,268.9,6.4″></path></svg></span> текста </div> |
CSS:
.underline { font-family: ‘Roboto Condensed’, sans-serif; font-size: 32px; line-height: 50px; margin: 20px 0; text-align: center; } .underline span { position: relative; } .underline svg { position: absolute; width: 100%; height: 60px; left: 0; top: 0; z-index: -1; } .underline svg path { stroke: red; stroke-width: 9; fill: none; animation: underline 10s infinite; animation-delay: 0s; opacity: 0; } .underline svg path + path { animation-delay: 0.5s; } @keyframes underline { 0% { stroke-dasharray: 0 1500; opacity: 1; } 15% { stroke-dasharray: 1500 1500; } 85% { opacity: 1; } 90% { stroke-dasharray: 1500 1500; opacity: 0; } 100% { stroke-dasharray: 0 1500; opacity: 0; } }
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
.underline { font-family: ‘Roboto Condensed’, sans-serif; font-size: 32px; line-height: 50px; margin: 20px 0; text-align: center; } .underline span { position: relative; } .underline svg { position: absolute; width: 100%; height: 60px; left: 0; top: 0; z-index: -1; } .underline svg path { stroke: red; stroke-width: 9; fill: none; animation: underline 10s infinite; animation-delay: 0s; opacity: 0; } .underline svg path + path { animation-delay: 0.5s; } @keyframes underline { 0% { stroke-dasharray: 0 1500; opacity: 1; } 15% { stroke-dasharray: 1500 1500; } 85% { opacity: 1; } 90% { stroke-dasharray: 1500 1500; opacity: 0; } 100% { stroke-dasharray: 0 1500; opacity: 0; } } |
Как изменить цвет подчеркивания в CSS?
В текст HTML реализовано стилизацию, чтобы сделать его броским и привлекательным. Текст может быть выделен курсивом, подчеркиванием и полужирным шрифтом по требованию.
Тег подчеркивания : Чтобы изменить цвет подчеркивания, нам нужно добавить стили с помощью CSS (встроенный / внутренний / внешний). По умолчанию цвет подчеркивания черный. В CSS мы будем использовать свойство text-decoration для стилизации подчеркивания.
Синтаксис:
Здесь немного текста
CSS text-decoration-color Свойство: Это свойство используется для указания цвета украшений (надчеркивание, подчеркивание и сквозные линии) над текстом.
Синтаксис:
цвет украшения текста: цвет | начальная | наследовать ;
Примеры ниже иллюстрируют подход к изменению цвета подчеркивания с помощью CSS
Пример 1:
HTML
> |
Выход:
Пример 2:
HTML
9 0049
<
html
>
<
головка
>
<
стиль
u {
текст-украшение-цвет: красный;
}
стиль
>
головка
>
<
корпус
3 >
9000
<
h3
>
Geeksforgeeks
<
u
> Портал компьютерных наук для вундеркиндов
u
>
h3
>
корпус
>
html
>
Как изменить стиль текста в CSS
Изменение стиля текста в CSS достигается с помощью инструмента t ext-decoration
и свойства text-transform
.Свойство text-decoration
используется для добавления к тексту эффектов, таких как подчеркивание и переход строк. Свойство text-transform
используется для изменения заглавных букв текста.
- Для свойства
text-decoration
можно использовать следующие значения:- none
- underline
- overline
- сквозной
Значение none свойства
text-decoration
можно использовать для удаления подчеркивания из ссылок, как показано ниже:Webucator
Text-Align, Text-Decoration и Text-Indent Оформление текста
оформление текста: нетукрашение текста: наложениеукрашение текста: подчеркиваниеоформление текста: сквозное - Вы можете использовать следующие значения для свойства
text-transform
:- нет
- заглавными буквами
- прописными
- строчными
В следующем примере кода показаны эффекты преобразования текста
Преобразование текста Преобразование текста
Text-Transform: НетПреобразование текста: использовать заглавные буквы - пишется строчными буквами, но с большой буквыText-Transform: нижний регистрПреобразование текста: прописные
CSS text-underline-position
Пример
Свойство CSS text-underline-position
устанавливает позицию подчеркивания, указанного в элементе.
Свойство text-underline-position
используется в сочетании со свойством text-decoration-line
(или сокращенным свойством text-decoration
), чтобы определить, где должна отображаться строка.
Если указано слева
или справа
, подразумевается под
.
Синтаксис
положение подчеркивания текста: авто | [под || [слева | справа]]
Возможные значения
-
авто
- Браузер / пользовательский агент может использовать любой алгоритм для определения позиции подчеркивания; однако он должен располагаться на уровне буквенного обозначения или под ним.
-
под
- Подчеркивание располагается под текстовым содержимым элемента. В этом случае подчеркивание обычно не пересекает нижние элементы. Это иногда называют подчеркиванием «бухгалтерский учет». Это ниже обычного «буквенного» подчеркивания. Это значение можно комбинировать с
слева
илисправа
, если конкретная сторона предпочтительна в режимах вертикального письма. -
слева
- Используется при отображении текста в режиме вертикального письма (например, текст читается вертикально сверху вниз или наоборот).
В режимах вертикального письма подчеркивание выравнивается так же, как в
по
, за исключением того, что оно всегда выравнивается по левому краю текста. Если это приводит к тому, что подчеркивание рисуется на стороне «сверху» текста, то верхняя линия также меняет стороны и рисуется на стороне «снизу». -
правый
- Используется при отображении текста в режиме вертикального письма (например, текст читается вертикально сверху вниз или наоборот).
В режимах вертикального письма подчеркивание выравнивается так же, как в
по
, за исключением того, что оно всегда выравнивается по правому краю текста.Если это приводит к тому, что подчеркивание рисуется на стороне «сверху» текста, то верхняя линия также меняет стороны и рисуется на стороне «снизу».
Кроме того, все свойства CSS также принимают следующие значения ключевых слов для всего CSS в качестве единственного компонента значения своего свойства:
-
начальный
- Представляет значение, указанное в качестве начального значения свойства.
-
наследовать
- Представляет вычисленное значение свойства родительского элемента.
-
отключено
- Это значение действует как
наследует
или какначальный
, в зависимости от того, унаследовано свойство или нет. Другими словами, он устанавливает для всех свойств их родительское значение, если они наследуются, или их начальное значение, если они не наследуются.
Основная информация об имуществе
- Начальное значение
-
авто
- Относится к
- Все элементы
- Унаследовано?
- Есть
- Медиа
- Визуальный
- Анимационный
- №
Пример кода
Базовый CSS
Вот пример базовой декларации.Объявление состоит из свойства и его значения.
текст-подчеркивание-позиция: под;
Рабочий пример в HTML-документе
Пример
Попробуй
Спецификации CSS
Поддержка браузера
Следующая таблица предоставлена Caniuse.com показывает уровень поддержки этой функции браузером.
Префиксы поставщиков
Для максимальной совместимости с браузером многие веб-разработчики добавляют свойства браузера, используя такие расширения, как -webkit-
для Safari, Google Chrome и Opera (более новые версии), -ms-
для Internet Explorer, -moz-
для Firefox, -o-
для более старых версий Opera и т. д. Как и в случае любого свойства CSS, если браузер не поддерживает проприетарное расширение, он просто проигнорирует его.
W3C не рекомендует эту практику, однако во многих случаях единственный способ проверить свойство - это включить расширение CSS, совместимое с вашим браузером.
Основные производители браузеров обычно стремятся придерживаться спецификаций W3C, и когда они поддерживают свойство без префикса, они обычно удаляют версию с префиксом. Кроме того, W3C советует поставщикам удалить свои префиксы для свойств, которые достигают статуса кандидата в рекомендации.
Многие разработчики используют Autoprefixer, постпроцессор для CSS.Autoprefixer автоматически добавляет префиксы поставщиков в ваш CSS, поэтому вам это не нужно. Он также удаляет старые ненужные префиксы из вашего CSS.
Вы также можете использовать Autoprefixer с такими препроцессорами, как Less и Sass.
CSS: отрегулируйте зазор между текстом и подчеркиванием
В этой статье показано несколько различных способов увеличения или уменьшения расстояния между текстом и подчеркиванием при использовании text-decoration: подчеркивание в CSS.
Использование свойства text-underline-offset
Свойство text-underline-offset используется для установки расстояния смещения линии оформления подчеркнутого текста от исходного положения. Теперь он совместим практически со всеми основными и новейшими версиями браузеров.
Пример:
Kindacode.com
<стиль>
.содержание {
маржа: 100 пикселей;
}
п {
размер шрифта: 30 пикселей;
}
.p1 {
текст-оформление: подчеркивание;
текст-подчеркивание-смещение: 10 пикселей;
}
.p2 {
оформление текста: синяя пунктирная линия подчеркивания;
текст-подчеркивание-смещение: 1px;
}
a {
размер шрифта: 24 пикселя;
оформление текста: красное волнистое подчеркивание;
смещение подчеркивания текста: 15 пикселей;
}
Моя кошка и моя собака нравятся друг другу.
Моя кошка и моя собака нравятся друг другу.
Выход:
Старый трюк
Если вы хотите, чтобы ваш код CSS отлично работал в старых браузерах, таких как IE 11 и ранее, мы воспользуемся другим решением. Нам нужно обернуть текст span и дать этому диапазону нижнюю границу .
Пример:
Kindacode.com
<стиль>
div {
маржа: 100 пикселей;
}
п {
размер шрифта: 24 пикселя;
}
.underline {
padding-bottom: 10 пикселей;
нижняя граница: # 666 1px solid;
}
a {
текстовое оформление: нет;
цвет синий;
}
.underline-link {
padding-bottom: 1px;
нижняя граница: сплошной синий 1 пиксель;
}
НЛО пролетел прошлой ночью по небу и дал нам
чудесные рождественские подарки .
Выход:
Заключение
Мы рассмотрели несколько методов корректировки зазора между текстом и подчеркиванием в CSS.Если вы хотите узнать больше о интерфейсной веб-разработке, ознакомьтесь со следующими статьями:
Вы также можете посетить нашу страницу категории CSS, чтобы найти последние учебные пособия и примеры.
Рекламные объявления
Как подчеркивать заголовки с помощью CSS | Учебник | Пример | Ноябрь 2021
Есть два возможных решения:
1. Вы можете использовать свойство text-decoration. Этот метод позволяет подчеркнуть текст тем же цветом, что и сам текст.В этом случае вы можете использовать следующий код.
Файл Test.css
h3 {
шрифт: 16px Arial, Geneva, Helvetica, без засечек;
оформление текста: подчеркивание;
}
Файл Test.html
Как подчеркнуть заголовки с помощью CSS <мета-http-Equiv = «тип-контента» контент = »текст / html; charset = utf-8 ″ />
Акции падают, поскольку Сэнди закрывает рынки США
Акции во всем мире упали, а бензин вырос из-за урагана «Сэнди», который угрожал U.Нефтеперерабатывающие заводы восточного побережья и закрытые торги акциями. Двухлетние итальянские облигации упали шестой день подряд, а евро ослаб.
На следующем рисунке показан результат:
Добавление подчеркивания к заголовку с помощью оформления текста
2. К заголовку можно добавить нижнюю границу. Это решение более гибкое, потому что вы можете разделить подчеркивание и заголовок с помощью отступов, и вы можете изменить цвет подчеркивания, чтобы он отличался от текста. Примечание: Эффект может немного отличаться в разных браузерах, и вам следует его протестировать. Следующий код иллюстрирует этот подход.
Файл Test.css
h3 {
шрифт: 16px Arial, Geneva, Helvetica, без засечек;
отступ: 2 пикселя;
нижняя граница: сплошная 1px #aaaaaa;
}
На следующем рисунке показан результат:
Добавление подчеркивания к заголовку с помощью нижней границы
HTML - Создание подчеркнутого текста в HTML (с или без CSS)
В этой статье мы предоставим вам пример создания текста с подчеркиванием с использованием HTML и CSS, а также с использованием простого HTML.Используя подчеркивание под текстом, мы можем привлечь внимание наших читателей. Но мы должны использовать подчеркнутый текст с осторожностью, поскольку обычно подчеркнутый текст на веб-сайтах является ссылками.
Мы можем создать подчеркнутый текст в HTML двумя способами.
- Используя CSS, свойство text-decoration
- Используя
или- Используя " border-bottom »в CSS
Давайте посмотрим на оба способа, приведя примеры, один за другим.
Подчеркнуть текст с помощью обычного HTML
Вы можете просто использовать тег в HTML, чтобы подчеркнуть текст.
Например:
Вы увидите результат, как показано ниже.
Теперь, как вы видите, это очень простой подход для подчеркивания текста, но я думаю, что было бы намного лучше использовать CSS. Почему?
Благодаря использованию CSS вы можете лучше контролировать этот подчеркнутый текст.
Вы можете изменить цвет подчеркивания, используя CSS, вы также можете изменить стиль подчеркивания.
Подчеркнуть текст с помощью CSS
Как упоминалось выше, у нас есть лучший способ подчеркнуть текст, который выполняется с помощью свойства CSS "text-decoration", которое дает больший контроль над стилем подчеркивания, цветом и т. Д.
Это подчеркнуто с помощью CSS text-decoration
Завершено еще одно оформление текста с помощью CSS
Еще одно использование CSS text-decoration-line.
Еще одно использование CSS, но на этот раз тоже.
CSS
.firstUnderline { оформление текста: подчеркивание } .SecondUnderline { text-decoration: подчеркивание волнистым зеленым } .ThirdUnderline { текст-украшение-строка: подчеркивание; } .UnderlineOverline { оформление текста: подчеркивание над чертой; }
Вывод:
Fiddle
Свойство
text-decoration
определяет украшение, добавляемое к тексту, и является сокращенным свойством для:- text-decoration-line (обязательно)
- text-decoration- color
- text-decoration-style
В приведенных выше примерах мы используем все способы подчеркивания текста с помощью CSS, используя сокращенное свойство
text-decoration
или свойствоtext-decoration-line
.Один из недостатков использования text-decoration - невозможность изменения толщины подчеркивания.
Итак, если вы хотите подчеркнуть текст и изменить его толщину, вы можете использовать свойство CSS "
border-bottom
", которое позволяет нам также изменять толщину подчеркивания.Подчеркивание с использованием свойства CSS "border-bottom"
HTML
Подчеркнутый с использованием нижней границы
Пунктирное подчеркивание высотой 5 пикселей
Перенос текста по строкам
УСС
.simpleUnderline { нижняя граница: сплошной 2px currentColor; } .Dottedunderline { нижняя граница: 5 пикселей, пунктирная красная; } .underline - blue { цвет нижней границы: синий; }
Вывод скрипта:
Вы также можете прочитать:
Флажок стиля с использованием CSS
Пользовательский флажок и переключатели в HTML
CSS: Как сделать ссылки не подчеркнутыми .. - Статьи
Это простое руководство, в котором показано, как удалить подчеркивание и добавить к ссылкам указатель мыши с помощью Dreamweaver MX и CSS.В этом руководстве показано, как удалить подчеркивание в ссылках с помощью Dreamweaver MX.
- Открыть окно -> Стили CSS (сдвиг F11)
- Выбрать новый стиль (страница со значком плюса в нижней части панели)
- Далее в типе выберите «Использовать селектор CSS».
- Затем определить только в этом документе.
- Вернитесь наверх, выберите ссылку: и нажмите ОК
- Теперь откроется окно определения стиля и введите текст, если вы хотите указать шрифт и цвет.Внизу установите флажок «Нет» для украшения.
- Вы должны увидеть это в заголовке вашего документа
- Вернитесь к шагу 2 и на этот раз выберите: посещенный. Это означает, как будет выглядеть ссылка после посещения. Используйте любые свойства, которые вы хотите использовать для посещенных ссылок. Я обычно использую то же самое, что и ссылка: таким образом, они выглядят одинаково.
- Повторите шаг 2 еще раз с: hover. Вот как будет выглядеть ссылка при наведении на нее мыши. На нем выберите подчеркивание для украшения, чтобы ваши ссылки были подчеркнуты.
- Повторите шаг 2 еще раз. На этот раз с: active. Как вы, наверное, догадались, это форматирует то, как будет выглядеть текст при нажатии на ссылку.
- А теперь сделайте ссылку на своей странице. Просто убедитесь, что ссылки в вашем стиле расположены в следующем порядке:
Подчеркнутые ссылки
- Используя " border-bottom »в CSS