Убрать подчеркивание у ссылки: Как убрать подчёркивание ссылок — Блог HTML Academy

html — Почему я не могу убрать подчеркивание текста?

У меня прописано свойство text-decoration: underline; для всех элементов, которые находятся в div. Но прописав text-decoration: none; для одной из надписей, я все равно не могу избавиться от подчеркивания. В чем тут дело?

.one {
  display: block;
  text-align: right;
  font-size: 30px;
  text-decoration: none;
}
div {
  width: 50%;
  height: 500px;
  background: yellow;
  text-align: center;
  font-size: 50px;
  color: purple;
  text-decoration: underline;
}
<div>
  <span>Hello, world!</span>
  <br>
  <span>Hello!</span>  
</div>
  • html
  • css

2

Как указано в MDN

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

перевод ответа @xpy


В спецификации указано, что при применении данного свойства к элементу, оно будет распространено на все внутренние in flow элементы (то есть на элементы, у которых не указан float, либо абсолютное позиционирование).

Так же есть уточнение

декорация текста не распространяется на любые вложенные out of flow элементы, ни на вложенные атомарные inline-level элементы, такие как inline-block и inline-table.

.one {
  display: inline-block;
  text-align: right;
  font-size: 30px;
  text-decoration: none;
}
div {
  width: 50%;
  background: yellow;
  text-align: center;
  font-size: 50px;
  color: purple;
  text-decoration: underline;
  padding: 10px;
}
<div>
  <span>Hello, world!</span>
  <br>
  <span>Hello!</span>
</div>

2

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

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

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

html — Как убрать подчеркивание?

Вопрос задан

Изменён 5 лет 7 месяцев назад

Просмотрен 977 раз

Добрый день! Я дико извиняюсь за следующий глупый вопрос, но факт остается фактом, впервые за много лет работы со стилем к моему большому стыду не могу справиться вот с чем: как у span убрать подчеркивание, в том числе и при наведении как на картинку, так и на сам span? При чем у a подчеркивание есть и должно быть, т. е. на странице ссылки при наведении подчеркиваются, и при этом мне нужно исключить подчеркивание именно у

<span>. Каким только способом не пытался, хоть тресни — подчеркивает. Никогда бы не подумал, что приду сюда с таким вопросом. Подскажите, пожалуйста.

span.help,
a span.help,
a:hover span.help {
	text-decoration: none;
}
<p>
<a href="#"><img src="kartinka.jpg">
<span>Мемориальный комплекс</span>
</a>
</p>
  • html
  • css

Это происходит, потому что подчеркивание применяется именно к a, а не span, и манипулируя стилями span, вы не сможете повлиять на стили a. Поэтому единственный выход — ввести новый класс, например, help-a:

a {
  text-decoration: none
}

a:hover {
  text-decoration: underline;
}

a.help-a:hover {
  text-decoration: none;
}
<p>
  <a href="#"><img src="kartinka.
jpg"> <span>Мемориальный комплекс</span> </a> </p>

1

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

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

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

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

спросил

Изменено 4 года, 10 месяцев назад

Просмотрено 529 тысяч раз

На моей странице я поместил несколько ссылок, под которыми мне не нужна строка, так как я могу удалить это с помощью HTML?

5

Встроенная версия:

com/">ваш сайт

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

См. ответ Джона, чтобы увидеть эквивалентный ответ с использованием CSS.

3

Это удалит все подчеркивания со всех ссылок:

 а {украшение текста: нет; }
 

Если у вас есть определенные ссылки, к которым вы хотите применить это, дайте им имя класса, например nounderline , и сделайте следующее:

 a.nounderline {text-decoration: none; }
 

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

Этот код относится к вашего документа или к таблице стилей:

 
    <тип стиля="текст/CSS">
        a.nounderline {украшение текста: нет; }
    

 

А в теле:

 Ссылка
 

0

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

 a:hover {
   текстовое оформление: нет;
}
 
  1. Добавьте это во внешнюю таблицу стилей (предпочтительно ):

     {украшение текста:нет;}
     
  2. Или добавьте это к вашего HTML-документа:

     <тип стиля = "текст/css">
     {украшение текста:нет;}
    
     
  3. Или добавить к сам элемент ( не рекомендуется ):

     
    
    com">Текст

Во всех других ответах упоминается украшение текста. Иногда вы используете тему WordPress или чужой CSS, где ссылки подчеркиваются другими методами, так что text-decoration: none не отключит подчеркивание.

Border и box-shadow — еще два известных мне метода подчеркивания ссылок. Чтобы их отключить:

 граница: нет;
 

и

 box-shadow: нет;
 

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

 ваш сайт
 

Следующее не рекомендуется, но иногда может оказаться полезным

Лучше использовать решение, предоставленное Джоном Конде, но иногда использование внешнего CSS невозможно. Таким образом, вы можете добавить в свой HTML-тег следующее:

 Моя ссылка
 

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

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

Задавать вопрос

спросил

Изменено 2 года,8 месяцев назад

Просмотрено 2к раз

Я пытаюсь создать подпись электронной почты со ссылкой на веб-сайт. Однако ссылка отображается как подчеркнутая. Я пробовал много вариантов,чтобы удалить подчеркивание из ссылки на веб-сайт,но не смог. Любая идея решить эту проблему?

<голова>Подпись электронной почты
<тело><таблица отступ="0" расстояние между ячейками="0" граница="0"><тд выровнять="сверху" выровнять="по центру"><изображение граница="0" alt="Логотип" источник="логотип. png"/><тд выровнять="сверху"><сильный>{имя}{фамилия}
<промежуток>{название

<промежуток>Т:{телефон}
<промежуток>М:{мобильный
<промежуток>Э:{электронная почта}

{компания}

<тд выравнивание="центр">
<изображение alt="Значок инстаграма" граница="0" src="it. png"/> <изображение alt="Значок Pinterest" граница="0" источник="pt.png"/><тд><промежуток>{веб-сайт}<тд colspan="2"><изображение граница="0" источник="баннер.png" alt="Баннер"/>

4

Это должно сделать это:

{website}

дополнительная информация о стилях ссылки в css можно найти здесь:https://www.w3schools.com/css/css_link.asp

1

Использование Оформление текста:нет;вы также можете использовать его в css и inline.

Подпись электронной почты<тело><тд выравнивание="центр">Значок Instagram
Оставить комментарий

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

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

©2019 Штирлиц Сеть печатных салонов в Перми

Цифровая печать,цветное и черно-белое копирование документов,сканирование документов,ризография в Перми.

Logo{имя}{фамилия}
{название

Т:{телефон}
М:{мобильный
E:{email}

{компания}