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

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

По умолчанию все ссылки подчёркнуты синим, но такое оформление легко изменить с помощью CSS-свойства text-decoration: none .

Убираем подчёркивание ссылок в CSS

Допустим, у вас есть ссылка:

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

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

Убираем подчёркивание ссылок в HTML

Если у вас нет доступа к стилевому файлу или на работе принято инлайнить стили, можете убрать подчёркивание прямо в HTML.

Сбросить стили в одной ссылке:

Убрать оформление во всех ссылках:

Селектор может быть любым — мы для примера показали селектор тега.

Будьте осторожны при сочетании инлайн-стилей и внешнего CSS, ведь стили в атрибуте style сложно переопределить.

Когда убирать подчёркивание

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

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

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

Так что, если вам не нравится, как выглядят ссылки — стилизуйте их по-своему. Примеры можете подсмотреть в статье про нестандартное подчёркивание текста на чистом CSS. Главное — не забывайте про UX и старайтесь поменьше инлайнить.

Материалы по теме

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Источник

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

Войдите, чтобы написать ответ

В css для header, а он не изменяется. Можете указать на ошибки?

Возможно ли повторить эффект заливки градиентом на стилях?

Как сделать обязательный скролл слайдера при прокрутке страницы?

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

Как скрыть часть текста?

Как решается баг slick-а с прыгающим последним слайдом?

Как в slick-slider правильно изменять размеры боковых слайдов, чтобы не ломался слайдер?

Как сделать вырез под кнопку?

Как сверстать эту нижнюю часть секции?

Почему слайды прижимаются друг к другу?

Минуточку внимания

• Хорошая ли стратегия разбивать монолит джанго на микросервисы джанго?
  • 4 подписчика
  • 0 ответов
  • 2 подписчика
  • 0 ответов
  • 2 подписчика
  • 1 ответ
  • 2 подписчика
  • 0 ответов
  • 3 подписчика
  • 0 ответов
  • 2 подписчика
  • 3 ответа
  • 2 подписчика
  • 1 ответ
  • 2 подписчика
  • 2 ответа
  • 2 подписчика
  • 1 ответ
  • 2 подписчика
  • 2 ответа

  Источник

  Как избавиться от подчеркивания для компонента Link React Router?

  

  У меня есть следующее: Как избавиться от синего подчеркивания? Код ниже:

  Компонент MenuItem находится в http://www.material-ui.com/#/components/menu Было бы полезно получить любую информацию или руководство. Заранее благодарю вас.

  7 ответов

  Я вижу, что вы используете встроенные стили. textDecoration: ‘none’ используется в child, где на самом деле он должен использоваться внутри как таковой:

  Я надеюсь, что это поможет

  Оно работает :). Имейте в виду, что если вы копируете, вставляете стиль в свой .css (потому что, конечно, вам не нравятся встроенные стили), то это text-decoration: none;

  Если вы используете styled-components , вы можете сделать что-то вроде этого:

  import React, < Component >from 'react'; import < Link >from 'react-router-dom'; import styled from 'styled-components'; const StyledLink = styled(Link)' text-decoration: none; &:focus, &:hover, &:visited, &:link, &:active < text-decoration: none; >'; export default (props) => />; 

  Вы можете добавить style=> в свой компонент Link чтобы удалить подчеркивание. Вы также можете добавить больше css в блок style например style=> .

   
  > to="/getting-started"> Get Started 
   

  .navigation_bar > ul > li < list-style: none; display: inline; margin: 2%; >.link

  Есть ядерный подход, который есть в вашем App.css (или аналоге)

  что предотвращает подчеркивание для всех тегов которые являются основной причиной этой проблемы

  на самом деле, это решение, которое мне помогло, так как я использовал sass, а не все мои решения, а не запускал стиль компонента .

  Чтобы развернуть ответ @Grgur, если вы заглянете в свой инспектор, вы обнаружите, что использование компонентов Link дает им предустановленное значение color: -webkit-link . Вам нужно переопределить это вместе с textDecoration если вы не хотите, чтобы он выглядел как гиперссылка по умолчанию.

  

  Я думаю, что лучший способ использовать Resact-router-Dom Link в MenuItem (и другой компонент MaterialUI, например, кнопки), это передать ссылку в «компонент» проп

  вам нужно передать путь маршрута в подпункте «to» «MenuItem» (который будет передан компоненту Link). Таким образом, вам не нужно добавлять какой-либо стиль, так как он будет использовать стиль MenuItem

  Ещё вопросы

  • 1 почему форма с именем добавляется в свойства документа
  • 0 Разделить слова со связанным списком в C ++
  • 1 принимать имена файлов с помощью командной строки в Java
  • 1 какие методы используют определенные разрешения в файле androidManifest?
  • 0 Moodle 2.7 Нужно уметь создавать пользовательское меню для разных групп пользователей
  • 1 Линейный график D3 JS начинается с 0
  • 1 Почему IntelliSense не работает должным образом в цикле foreach?
  • 0 SSRS: несколько ссылок HTML в одном столбце не отображаются правильно при экспорте в Excel
  • 1 Добавление объекта в список
  • 1 отображение маршрута 404 при обновлении asp.net MVC 3 до MVC 5
  • 0 как установить кнопку положения внизу?
  • 1 Установка нового сервера Glassfish на Eclipse Indigo
  • 0 prettyCheckable останавливает проверку jquery от работы в флажках
  • 0 Сортировка списка с помощью jquery UI
  • 1 Как удалить последнюю строку в сетке с помощью WPF?
  • 1 Java Rect.intersects () иногда не работает
  • 1 Получение нескольких подстрок из одной строки C #
  • 0 Фильтровать и сортировать многомерный массив в PHP
  • 1 Передача аргументов нескольких и различных функций в Python
  • 1 C # Закрывающий обработчик событий не работает
  • 0 Способ загрузить все необходимые зависимости kde, чтобы начать работать над программированием kde?
  • 1 Котлин — Наследование в выражении объекта
  • 0 отправить ответ из node.js в Jquery
  • 0 Управление конфликтом событий в родительско-дочернем div
  • 0 невозможно загрузить динамическую библиотеку
  • 0 Преобразование формата объекта JSON с помощью angularjs
  • 0 Я новичок в веб-браузере Android и использую JavaScript
  • 1 Как реализовать http длинный опрос в Angular 2
  • 1 Угловая труба: невозможно заменить / n
  • 1 Как я могу инициализировать мой RelativeLayoutButton вне метода onCreate?
  • 0 PHP Alter Base64 Кодировка изображения
  • 1 Не в состоянии использовать Nullable DbGeography
  • 1 Использование Unicode в пункте меню google-apps
  • 1 Если Элемент не существует
  • 1 Невозможно вызвать тесты Cucumber для приложения Android на Java
  • 1 Ошибка tkinter.Text () (_tkinter.TclError: ожидаемое целое число, получено «sans»)
  • 0 Наилучшая практика для включения скриптов в угловые шаблоны?
  • 1 Monitor.Wait время ожидания никогда не истекает
  • 1 Изменение переменной в функции с аргументом
  • 0 phpmailer занимает 5 секунд .. пока php mail () занимает меньше 1
  • 0 Порядок инициализации импорта ES6 и угловых контроллеров
  • 0 Проверка RegEx для динамически создаваемых элементов с использованием JavaScript
  • 0 почему оповещение не срабатывает с помощью угловых JS в контроллере
  • 0 Почему я не могу сохранить эти элементы в массив в jquery
  • 0 Создание горизонтальной прокрутки и элементов обтекания
  • 1 Чтение XML-файла из определенных тегов
  • 0 Меню CSS: перенос слов в подменю
  • 1 Как обрабатывать расширяемые ViewHolders в RecyclerView?
  • 1 Создать новые панды столбцы из нескольких столбцов
  • 1 Динамический поворот в LINQ: поворотные столбцы, определенные во время выполнения

  Источник

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

  Используйте свойство text-decoration со значением none для селектора A .

  Описание

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

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

  Пример 1. Ссылка без подчеркивания

  HTML5 CSS 2.1 IE Cr Op Sa Fx

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

  Результат данного примера показан ни рис. 1.

  

  Рис. 1. Ссылка, у которой отсутствует подчёркивание

  HTML по теме

  CSS по теме

  Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

  Популярные рецепты

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

  Источник

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

  Используйте свойство text-decoration со значением none для селектора A .

  Описание

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

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

  Пример 1. Ссылка без подчеркивания

  HTML5 CSS 2.1 IE Cr Op Sa Fx

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

  Результат данного примера показан ни рис. 1.

  

  Рис. 1. Ссылка, у которой отсутствует подчёркивание

  HTML по теме

  CSS по теме

  Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

  Популярные рецепты

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

  Источник