Css link not underlined

The code above tells the browser to have no type of underline (text-decoration) on any tags (links).

Adding this code to a CSS file instead of in the HTML head section makes all web pages that use the CSS file to set links with no underline.

Make an individual link not have an underline

If you want only one link not to be underlined on your web page, you can create a link similar to the code below. You can do so anywhere in the tag to make the link not have an underline.

Defining a style property this way is called inline styling. The style is specified «inline,» in the element itself, in the body of your page.

The non-underlined link appears like this on your web page:

Related information

Источник

How to Remove Underline from a Link in CSS – HTML Style Guide

Kolade Chris

If you’re a web developer, you’ve probably wanted to get rid of the default underline that appears when you add a link to a page.

Fortunately, just like other elements on a web page, you can style the anchor tags responsible for displaying a link.

In this article, I will show you how to remove the underline from a link with CSS. I will also show you the four states links can be in, and how to remove the underline for each one.

How to Remove Underline from a Link in CSS

By default, this is how the link tag appears in the browser:

Firstly, it is important to know that the link tag (anchor tag) can be in 4 different states called pseudo-classes:

• a:link : the regular state of the link when it is not active, visited, or hovered on
• a:visited : when the link has been clicked by the user, that is, visited
• a:hover : when the user is hovering on the link
• a:active : when the user is clicking on the link

N.B.: The states (pseudo-classes) must appear in the order listed above due to the cascading nature of CSS.

To finally remove the default underline of the link, you can target all the pseudo-classes and assign them a text-decoration property of none .

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

You can also remove the default underline all in one with the anchor element selector:

You can play with the 4 pseudo-classes of the link tag with this pen:

Conclusion

I hope this article helps you learn how to remove the default underline from links in CSS.

If you find the article helpful, don’t hesitate to share it with your friends and family.

Kolade Chris

Web developer and technical writer focusing on frontend technologies. I also dabble in a lot of other technologies.

If you read this far, tweet to the author to show them you care. Tweet a thanks

Learn to code for free. freeCodeCamp’s open source curriculum has helped more than 40,000 people get jobs as developers. Get started

freeCodeCamp is a donor-supported tax-exempt 501(c)(3) charity organization (United States Federal Tax Identification Number: 82-0779546)

Our mission: to help people learn to code for free. We accomplish this by creating thousands of videos, articles, and interactive coding lessons — all freely available to the public. We also have thousands of freeCodeCamp study groups around the world.

Donations to freeCodeCamp go toward our education initiatives, and help pay for servers, services, and staff.

Источник

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник

How Do You Display Hyperlinks without an Underline?

The Anchor tag in HTML is used to create a hyperlink in a webpage, which can take the user to an external link or even other documents on the same web page.

There exists a default styling of elements in HTML. We can easily override all these default stylings; for the anchor tag, we have default styling as blue-colored text with an underline. In this article, we will discuss how we can remove the underline from the anchor tag.

We can remove the underline of the anchor tag by setting the style property text-decoration as none .

Removing Underline from Hyperlink with Internal CSS

The underline of the hyperlink can be removed with internal CSS by using a style tag with the property text-decoration as none .

Output:

Removing Underline from Hyperlink with External CSS

Output: Explanation:

• In the external CSS, we have written a style for a particular id anchor-tag that is being used in the HTML Document.
• Here, we are using the id selector, but we can use other selectors as well, like the class selector and grouping selector.
• In the HTML document, we have created the association of the external stylesheet and HTML document with the link tag.
• Subsequently, we are using the same id for our anchor tag, and that is the reason the corresponding style is being applied to the anchor tag.

Using CSS Class to Remove Underline from Hyperlink

Output: Explanation:

• In this example, everything is similar to the last one; the only difference is here, we are using a class selector instead of an id selector.

Using Global CSS to Remove Underline from All Hyperlinks

Universal Selector: It selects all elements of the document and applies the corresponding styles.

Output: Explanation:

• We have selected all elements with the universal selector (*) and written the property text-decoration as none .
• Ideally, we should not use this approach because the styles are being applied to each and every element.

Make All Links Not Underlined

Grouping Selector: It is used to select all elements of the same group, and then it applies the styles to those elements.

Output: Explanation:

• The grouping selector a will select all anchor tags of the document, and it will provide the styles to all of them.
• In this way, we can remove the underline from all hyperlinks.

Make an Individual Link Not Have an Underline

Three approaches to achieve this are listed below,

• Id Selector: We can assign an id to the particular anchor tag, and then we can associate some styles to that id in the stylesheet.

• Class Selector: We can define a class with some styles, and then we can restrict ourselves from allocating that class to only one element. In this way, we can style an individual link.

• Inline Styling: This could be the best approach because inline styles have the highest priority. Also, it is simple to provide styles to any individual element with inline styling.

Conclusion

• The text-decoration property is used to remove the underline in hyperlinks. We can provide value as none to achieve the same.
• Generally, we remove underlines from hyperlinks to make better designs because the underline doesn’t fit perfectly in those designs.
• Apart from inline styling, there are several selectors which we can use, like class selector, grouping selector, and id selector. All have their own properties and hence can be used according to the situation.

Источник