Css link how to remove underline

How to remove the underline for anchors(links)?

You can never assume how a browser will render your HTML. a tag renders an anchor which the browser chooses to display as underline by default. u is the only underline tag. the answers below are CSS answers

The irony that someone is pedantic enough to make this comment, but not pedantic enough to spell the word correctly (or even consistently!) blows my mind.

In addition to answers below, handling a:hover should also be considered, most popular browsers tend to show an underline on anchors upon hovering.

15 Answers 15

Use CSS. this removes underlines from a and u elements:

Sometimes you need to override other styles for elements, in which case you can use the !important modifier on your rule:

If color: black !important; would be added for body , will that also set all elements, including anchors, visited anchors, hovered anchors to be always black?

Ωmega Δ, apparently not, and thanks to you pointing it out I found an error in the body rule overall. I have updated my answer.

What I found is that if you set style text-decoration: none !important; for body element, then it works for anchors only when you explicitly set style text-decoration: inherit; for a elements.

It’s generally better to avoid !important and use specificity and cardinality to override styles, otherwise you can end up with a stylesheet full of !important without any understanding of the structure that makes it necessary. It is a code smell IMO.

!important is like having a nuke. But once you start down and are seduced to use !important other elements may get it (nuke) and the advantage is gone in favor of an impasse, which is great for the world, as MUD ensures peace, but in the world of css, such peace means you can’t give something the advantage.

This will remove your colour as well as the underline that anchor tag exists with

The simplest option is this:

Of course, mixing CSS with HTML (i.e. inline CSS) is not a good idea, especially when you are using a tags all over the place.
That’s why it’s a good idea to add this to a stylesheet instead:

Or even this code in a JS file:

var els = document.getElementsByTagName('a'); for (var el = 0; el

Iphone/Android aren’t good benchmarks as they do not represent the backwards HTML rendering of Gmail or Outlook.

Use CSS to remove text-decoration s.

I’ve been troubled with this problem in web printing and solved. Verified result.

Best Option for you if you just want to remove the underline from anchor link only-

This will remove the underline.

Further, you can use a similar syntax for manipulating other styles too using-

text-decoration: none; text-decoration-color: blue; text-decoration-skip: spaces; text-decoration-style: dotted; 

Hope this helps!

P.S.- This is my first answer ever!

Sometime it will override by some rendering UI CSS. Better to use:

In my case there was a rule about hover-effect by the anchor, like this:

Of course, text-decoration: none; could not help in this situation. And I spend a lot of time until I found it out.

So: An underscore is not to be confused with a border-bottom.

When you want to use an anchor tag simply as a link without the added styling (such as the underline on hover or blue color) add class=»no-style» to the anchor tag. Then in your global stylesheet create the class «no-style».

1. It will not affect all anchor tags, just the ones with the «no-style» class added to them.
2. It will override any other styling that may otherwise prevent setting text-decoration to none.

To provide another perspective to the problem (as inferred from the title/contents of the original post):

If you want to track down what is creating rogue underlines in your HTML, use a debugging tool. There are plenty to choose from:

For Firefox there is FireBug;

For Opera there is Dragonfly (called «Developer tools» in the Tools->Advanced menu; comes with Opera by default);

For IE there is the «Internet Explorer Developer Toolbar», which is a separate download for IE7 and below, and is integrated in IE8 (hit F12).

I’ve no idea about Safari, Chrome and other minority browsers, but you should probably have at least one of the three above on your machine anyway.

Источник

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник

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

Источник

how to remove underline on link?

that problem appear in safari10,mozilla 8, and google chrome Thanks in advance for any help, and I’m really sorry if this has been asked before.

Have a look in chrome’s inspector to see if there’s a more specific style taking priority like .mydiv a<>

3 Answers 3

This is a shortcut for achieving the same results. My answer has the correct way of applying the rules separately the way the original poster asked. So if anyone is having the same problem, but needs different styles for each rule, my answer shows the correct way to do it.

I would say that your answer is just correct if the user wants to achieve compleatly different results on the pseudo classes. But I think that a base style like in my answer is a better practice. So the user has just to define the difference to the base style. Which must be in your order.

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

I believe that they need to be in this order.

PLEASE READ THE COMMENTS. THIS IS THE CORRECT ANSWER TO THE ORIGINAL QUESTION

quackit.com/css/css_hyperlinks.cfm Note that the a:hover must be placed after the a:link and a:visited rules, since otherwise the cascading rules will hide the effect of the a:hover rule. Similarly, because a:active is placed after a:hover, the active color will apply when the user both activates and hovers over the ‘anchor’ element.

Either way, don’t think my answer should have been voted down without looking up the information first. I would assume, that since I found many sites saying the same thing, that the rule order has to make some difference.

And here too: w3schools.com/css/css_pseudo_classes.asp Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective!! Note: a:active MUST come after a:hover in the CSS definition in order to be effective!!

I know when I post questions sometimes I make them simpler so that they are easier to understand. I believe the original question was why those four rules, when put in that order, didn’t work. The reason is because the order is wrong, according to official documentation. The all-in-one shortcut is just that, a shortcut, but it doesn’t answer the question of how to apply the four separate rules individually. So while it may not matter when they are all the same not everyone that will read this page will be in the same case, and they may want to know the CORRECT way to apply these rules.

Voted up for fairness: the answerer obviously made some researches and provided evidence. @SherwinFlight don’t blame the community, blame the people.

Источник