Css href not underlined

How To Remove Underline From Link in CSS

(There are 2 ways to remove those lines under a link using CSS)

To remove lines under links in CSS set text-decoration property to none

Underlines below your link can be annoying when you want to make clickable text without having to display a line underneath it.

There are 3 ways to remove those lines under a link using CSS. What are they?

Sometimes they interfere with the text flow or worse, your UI design.

Not all clickable text needs an underline.

In CSS the line under a link is controlled by text-decoration property.

The property text-decoration is a shorthand for 4 different properties:

1. text-decoration-line (controls presence of line under text , above text or under a link )
2. text-decoration-thickness (controls thickness of line above or under the link or text)
3. text-decoration-color (controls color of the underline)
4. text-decoration-style (can be solid , wavy , double )

As you can see you can even control color of the wavy underline.

I don’t think overline is used that often, have you ever seen it anywhere? 😅

How to remove line under a link

To remove underline from a link using inline CSS you can set text-decoreation to none :

This example used inline css , where code was typed directly into style attribute of the element.

But how do you remove underline from all links on your page with a single CSS command?

CSS code to remove an underline from all hyperlinks

To remove underline from all hyperlinks on your page, assign text-decoration: none to the a tag itself as shown in this example:

You should place this code inside your style tags in your HTML page source code.

Another way to remove line from a link in CSS

You can also use text-decoration-line property:

Note: this will remove an underline from all links on your page.

Here’s a link to this page with text-deocration-line: none applied:

Hide line under a link by changing its color to background color

There is a use case for this.

And that’s when you still want the line to appear on hover.

This will set color of the underline to white, same as background.

(Sure, text-decoration-line:none; can still be used to same effect.)

This will change color of your underline on a text link on mouse hover.

How to remove underline from links in different states

Remember that hyperlinks have 4 different states:

1. a:link link was not visited, hovered, or clicked on a link
2. a:visited this link has been visited (clicked on)
3. a:hover mouse cursor is currently hovering over the text link
4. a:active mouse button is held down but not yet released

So here’s the code you would use to disable underline on any of link states:

a:link < text-decoration: none >a:visited < text-decoration: none >a:hover < text-decoration: none >a:active

Источник

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник

How to create a link with no underline in HTML

Using CSS (cascading style sheets), you can change the style of your HTML (hypertext markup language) links to not have an underline using any of the following recommendations.

Do not create links that are invisible to humans with the intention of them still being followed by search engines that crawl your site. Modern search engines detect this action, and consider it a deceptive practice. If they detect human-invisible links on your site, search engines may drop your ranking in their search results, or delist your site completely.

Most users browsing the Internet understand the concept of links being underlined, and may not expect that to change. These users may assume any text not underlined is not a link. For this reason, if you remove the underline, make sure to change the link color so it stands out clearly to the user.

Make all links not underlined

To make all of the links on your web page not have underlines, configure the text-decoration style of the a (anchor) element. For instance, you can add the following CSS code between the tags of your web page’s HTML code. Here, the element contains the style that changes how anchor links are decorated.

 a:link < text-decoration: none; >a:visited < text-decoration: none; >a:hover < text-decoration: none; >a:active