Подчеркивание css: Нестандартное подчёркивание текста на чистом CSS. Свойство text-decoration — журнал «Доктайп»

Как убрать подчеркивание ссылок? CSS свойство text-decoration — OneKu

26-09-2018 17:39

Содержание статьи:

• Создание ссылки
• Стилизация ссылки в CSS
• Изменение наведенной ссылки в CSS

Ссылки – неотъемлемая часть любой веб-страницы. Они могут быть как текстовыми, так и в виде кнопок. В этой статье будут рассмотрены только текстовые ссылки.

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

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

Создание ссылки

Для демонстрации работы этого метода, необходимо создать ссылку. В этом поможет стандартный HTML 5.

Вам будет интересно:Redirect: что это и как убрать из браузера?

Чтобы создать ссылку, нужно использовать парный тег «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».

Автор: Регина Виноградова 26-09-2018 17:39

Похожие статьи

iPhone ‘2021, iPhone 14, iPhone Ultimate… Вариантов пропустить чертову дюжину было немало, но Apple не верит в нумерологию. Поэтому ежегодное яблочное ассорти, щедро приправленное сопутствующими сервисами, все-таки вышло под номером 13.

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

Дарина Круглова

17-09-2021 16:01

Информационные технологии

Подробнее

Владельцы сайтов часто сталкиваются с кибератаками. Хакеры сканируют Интернет в поисках уязвимых ресурсов, а затем внедряют на них майнеры криптовалют, крадут конфиденциальную информацию, устраивают DDoS-атаки или шифруют данные и требуют выкупа. В результате владелец сайта может потерять репутацию и вложенные в раскрутку ресурса средства, оказаться один на один с заблокированным сервером или получить штраф за утечку клиентских данных. Сегодня

Евгения Ковалевская

17-09-2021 16:01

Информационные технологии

Подробнее

Даже самым стабильным и надежным СХД требуется обслуживание. Многие думают, что невозможно избежать обновлений прошивки и ПО или замены вышедшего из строя оборудования. Но так ли это в действительности? Вот пример системы, которая четыре года работает без обслуживания и непредвиденных сбоев. Еще в 2017 году компания Toshiba создала ZFS-систему хранения данных для Technology Experience Lab – подразделения международного оператора центров обработки

Марина Репина

15-09-2021 20:36

Информационные технологии

Подробнее

Не секрет, что в целях сокращения издержек многие компании отказываются от покупки оригинальных расходных материалов для принтера: по данным Gartner Group, затраты на офисную печать в среднем составляют от 5 до 15% от денежного оборота организации. Однако стоит помнить, что остатки такого тонера могут осесть на фиксирующем валике или барабане устройства, спровоцировать эрозию и повредить его механизмы. «Пиратский» материал способен засорить печатающие

Ирина Меркулова

15-09-2021 20:36

Информационные технологии

Подробнее

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

Лукьян Беляков

15-09-2021 20:31

Информационные технологии

Подробнее

Пандемия COVID-19 значительно переформатировала структуру рынка труда. Огромное количество людей стало работать в гибридном формате: большую часть рабочего времени проводят удаленно, посещая офис пару раз в неделю. Это вызвало не только серьезное перераспределение человеческих ресурсов, но и переформатирование всей ИТ-инфраструктуры организаций. Наличие профессионального оборудования для коммуникаций, презентаций и видеосвязи стало необходимым

Мартьян Корнилов

15-09-2021 20:31

Информационные технологии

Подробнее

Российской компании МойОфис, которая создает продукты для работы с документами и коммуникации, в этом году исполняется 8 лет. Команда разработчиков смогла с нуля сделать и представить рынку современный отечественный офисный софт, который не только не уступает иностранным аналогам, но и по ряду параметров превосходит его. В июне 2021 года компания выпустила очередное обновление своей платформы МойОфис 2021.02. Редакция IT-Expert решила познакомиться

Наталья Соболева

11-08-2021 16:12

Информационные технологии

Подробнее

Каждая компания, работающая с огромным массивом данных и видеоконтентом, в частности, рано или поздно задается вопросом: а как эффективно решать задачи масштабирования инфраструктуры?   В своем экспертном материале компания NUT. Tech делится опытом работы с интересным решением от Intel и рассказывает обо всех тонкостях его использования. Когда перед компанией встает задача развивать высокопроизводительные масштабируемые решения, в самую первую

Римма Чернышова

03-08-2021 14:26

Информационные технологии

Подробнее

Чаще всего о средствах удаленного управления (УУ) вспоминают, когда компьютер внезапно захворает. Реже — когда требуется помощь специалиста, а в пределах тактильной досягаемости такого, как назло, не оказалось. Об этом давно знают системные администраторы крупных компаний, вынужденные настраивать компьютеры, расположенные на значительном расстоянии от их рабочих мест. Об этом знают и сотрудники техподдержки, обслуживающие программные продукты

Ксения Быстрова

01-08-2021 01:06

Информационные технологии

Подробнее

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

Любовь Власова

31-07-2021 05:47

Информационные технологии

Подробнее

Плавающее подчёркивание в навигации | by Vitaliy Kirenkov

Плавающее подчёркивание в навигации | by Vitaliy Kirenkov | Medium2 min read

·

Jun 25, 2021

This article is also available in english.

Photo by Jeffrey Workman on Unsplash

CodePen с финальным результатом.

Приветствую.

Иногда по дизайнерской задумке нужно, чтобы при наведении на пункт меню подчёркивание не просто появлялось, а “перетекало” от одного пункта к другому.

Когда-то давно, для реализации этой задачи я подключал плагин Lavalamp.

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

• используют jQuery;
• работают с фиксированные размерами;
• имеют лишний пустой элемент в DOM.

Моё решение:

• содержит минимум JavaScript;
• пункты меню могут быть динамичной ширины и нет привязки к их количеству;
• в DOM не добавляется отдельный “плавающий” элемент.

В HTML используется стандартная разметка меню:

Вся магия происходит именно тут, в CSS. Проблема “лишнего” пустого элемента в DOM решается с помощью псевдоэлемента.

Из JavaScript нельзя устанавливать стили псевдоэлементам, зато можно устанавливать пользовательские свойства. Они находятся в области видимости блока и подчиняются CSS-каскаду. Проще говоря, передаются вглубь. Таким образом, если задать свойства для .menu_list, то они будут доступны его псевдоэлементам и другим дочерним блокам.

Если опустить оформление, то в CSS ключевые стили для подчёркивания:

Стили для псевдоэлемента:

Получается, в скрипте остаётся сделать следующее:

1. посмотреть ширину пункта меню, на который навели;
2. посмотреть позицию слева (offset) пункта меню по оси Х;
3. установить полученные значения обёртке (.menu__list).

В первую очередь, сохраняем меню в переменную:

Далее вешаем слушатель на наведении мыши на меню и проверяем, наведён ли курсор на ссылку:

Внутри получаем значения и устанавливаем их соответствующему свойству:

И теперь нужно написать второй слушатель, который сбросит ширину при уходе курсора с меню:

CodePen, в котором все это собрано вместе (с оформлением).

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

JavaScript

Design

Navigation

Written by Vitaliy Kirenkov

1 Follower

Lead Front-end Developer

More from Vitaliy Kirenkov

Vitaliy Kirenkov

Sliding underline in navigation

Sometimes it is required not only to draw a line under ahovered menu item, but that the line to “flow” from one item to another.

2 min read·Jun 25, 2021

Vitaliy Kirenkov

Sliding underline in navigation

Sometimes it is required not only to draw a line under ahovered menu item, but that the line to “flow” from one item to another.

2 min read·Jun 25, 2021

See all from Vitaliy Kirenkov

Recommended from Medium

The PyCoach

in

Artificial Corner

You’re Using ChatGPT Wrong! Here’s How to Be Ahead of 99% of ChatGPT Users

Master ChatGPT by learning prompt engineering.

·7 min read·Mar 17

Michal Malewicz

There are FIVE levels of UI skill.

Only level 4+ gets you hired.

·6 min read·Apr 25

Lists

Stories to Help You Grow as a Designer

11 stories·94 saves

Interesting Design Topics

199 stories·8 saves

Figma 101

7 stories·14 saves

Icon Design

29 stories·8 saves

JP Brown

What Really Happens to a Human Body at Titanic Depths

A Millisecond-by-Millisecond Explanation

·4 min read·4 days ago

Zulie Rane

in

The Startup

If You Want to Be a Creator, Delete All (But Two) Social Media Platforms

In October 2022, during the whole Elon Musk debacle, I finally deleted Twitter from my phone.

Around the same time, I also logged out of…

·8 min read·Apr 19

Christina Sa

in

UX Planet

The UX Design Case Study That Got Me Hired

Getting a job in UX design is tough, but one particular case study helped me stand out from the crowd. I designed a non-traditional…

·8 min read·Mar 16

Love Sharma

in

Dev Genius

System Design Blueprint: The Ultimate Guide

Developing a robust, scalable, and efficient system can be daunting. However, understanding the key concepts and components can make the…

·9 min read·Apr 20

See more recommendations

Status

Writers

Careers

Privacy

Text to speech

css — подчеркивание текста разрывается между строчными буквами в электронной почте html

У меня возникла проблема при использовании оформления текста: подчеркивание пропускает пробелы между строчными буквами. Я попробовал «text-decoration-skip-ink: none», который, похоже, не работает, и я не думаю, что это решение, которого раньше не было. Не совсем уверен, как устранить неполадки с этим

 
Терапия только эстрогенами
 

• html
• css
• html-электронная почта

2

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

Измените свой код:

 
    <тд>
        Терапия только эстрогенами
    

 

К этому:

 
    <тд>
        Терапия только эстрогенами
    

 

И вы даже можете настроить интервал под текстом. Это не обязательно «Исправить», но обходной путь. Все, что я сделал, это то, что, поскольку часть подчеркивания не играла хорошо, я удалил ее и добавил границу внизу и отступы, чтобы отрегулировать высоту/пространство между словом и самим подчеркиванием. Это будет выглядеть так (до и после):

Обратите внимание: Если проблема была в теге «A», вы также можете добавить "display:inline-block;" к нему для того же эффекта. Я не добавлял его к этому, потому что диапазон уже встроен.

Удачного кодирования.

1

Так должно работать подчеркнутое. Я пробовал (см. следующий фрагмент), и все работает нормально. На caniuse говорится, что он должен работать во всех браузерах, кроме IE (вы что-то изменили в Internet Explorer?)

 .class-name {
  оформление текста: подчеркивание;
  текстовое оформление-без толщины: 1px;
  цвет: #1C2A5B;
  text-decoration-skip-ink: нет;
} 

 <тд>
  
    Терапия только эстрогенами
  
 

Чтобы решить эту проблему, можно использовать border-bottom или даже ::after для замены подчеркивания

3

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя адрес электронной почты и пароль

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

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

.underline — Класс CSS Tailwind

← Список классов CSS Tailwind

 
Lorem ipsum dolor sit amet.
 

Preview

Lorem ipsum dolor sit amet.

Проверить

.underline в реальном проекте

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

Открыть в визуальном редакторе →

Открыть в визуальном редакторе →

Открыть в визуальном редакторе →

Открыть в визуальном редакторе →

Открыть в визуальном редакторе →

Открыть в визуальном редакторе →

Открыть в визуальном редакторе →

Открыть в визуальном редакторе →

Открыть в визуальном редакторе →

Открыть в визуальном редакторе →

Источник CSS

 . underline {
  оформление текста: подчеркивание;
} 

Подробнее в тексте CSS Tailwind

• .antialiased
• .subpixel-сглаживание
• .text-opacity-*
• .break-нормальный
• .разрывные слова
• .сломать все
• .truncate
• .верхний регистр
• .нижний регистр
• . с большой буквы
• .нормальный случай
• .ведущий-нет
• .лидирующий тайт
• .ведущий-снаг
• .ведущий-нормальный
• .ведущий-расслабленный
• .ведущий свободный
• .ведущий-3
• .ведущий-4
• . ведущий-5
• .ведущий-6
• .ведущий-7
• .ведущий-8
• .ведущий-9
• .ведущий-10
• .line-через
• .без подчеркивания
• .шрифт-прическа
• .шрифт-тонкий
• . фонт-лайт
• .шрифт-обычный
• .шрифт-средний
• .шрифт-полужирный
• .шрифт полужирный
• .шрифт-сверхжирный
• .черный шрифт
• .текст-xs
• .текст-см
• .текстовая база
• . текст-lg
• .текст-xl
• .текст-2xl
• .текст-3xl
• .текст-4xl
• .текст-5xl
• .текст-6xl
• .шрифт-без
• .шрифт с засечками
• .шрифт-моно
• .текст слева
• . текст-центр
• .текст справа
• .текстовое выравнивание
• .курсив
• .не курсив
• .whitespace-нормальный / .whitespace-*
• .затягивающий
• .упорный
• .трекинг-нормальный
• .tracking-wide
• .

  No related posts.