Css no text decoration on links

CSS Links

With CSS, links can be styled in many different ways.

Styling Links

Links can be styled with any CSS property (e.g. color , font-family , background , etc.).

Example

In addition, links can be styled differently depending on what state they are in.

The four links states are:

• a:link — a normal, unvisited link
• a:visited — a link the user has visited
• a:hover — a link when the user mouses over it
• a:active — a link the moment it is clicked

Example

/* unvisited link */
a:link color: red;
>

/* visited link */
a:visited color: green;
>

/* mouse over link */
a:hover color: hotpink;
>

/* selected link */
a:active color: blue;
>

When setting the style for several link states, there are some order rules:

Text Decoration

The text-decoration property is mostly used to remove underlines from links:

Example

a:visited text-decoration: none;
>

a:hover text-decoration: underline;
>

a:active text-decoration: underline;
>

Background Color

The background-color property can be used to specify a background color for links:

Example

a:link <
background-color: yellow;
>

a:visited background-color: cyan;
>

a:hover background-color: lightgreen;
>

a:active background-color: hotpink;
>

Link Buttons

This example demonstrates a more advanced example where we combine several CSS properties to display links as boxes/buttons:

Example

a:link, a:visited <
background-color: #f44336;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
>

a:hover, a:active background-color: red;
>

More Examples

Example

This example demonstrates how to add other styles to hyperlinks:

Example

Another example of how to create link boxes/buttons:

a:link, a:visited <
background-color: white;
color: black;
border: 2px solid green;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
>

a:hover, a:active background-color: green;
color: white;
>

Example

This example demonstrates the different types of cursors (can be useful for links):

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

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 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.

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

Источник

Читайте также:  Javascript select all elements with class