Css no link highlight

3 Ways to Highlight Links to the Current Page with CSS

We suggest looking at 3 different ways to highlight links to the current page using CSS.

The first way – HTML/CSS

I noticed that WordPress automatically adds a class for the active clicked link. You can see this if you open the source code of the site.

In the source code you can see that the class “current-menu-item” has been added to the active link. This means that we can add any style to this class.

Пример:

Open the CSS file of the template and enter this code:

#menu li .current-menu-item acolor:#сс0000;>

Note: This code will work if your menu has been taken in a block like mine:

 id="menu">your menu (I displayed the menu via a widget) 

I will now share how to highlight an active link for absolutely any site using just a little JavaScript and CSS code.

2 ways on Java Script / CSS

I want to offer you ready-made code in JavaScript, which will automatically prescribe the class ” act” to the active menu link that links to the current page. This code is easily embedded in any design, template and any CMS (Joomla, WordPress, etc.).

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   body a a:hover a.act  
Link1 Link2
 try < var el=document.getElementById('msgText').getElementsByTagName('a'); var url=document.location.href; for(var i=0;i;> ;> catch(e)<>  

Note paragraph 5 to 10 in the code.

Here you change the appearance of the menu, using the knowledge of CSS.

There is another way of solving this problem, also using JavaScript.

window.onload = clearCurrentLink; function clearCurrentLink()< var a = document.getElementsByTagName("A"); for(var i=0;i

Whichever way you prefer, that’s your choice.

Источник

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник

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.

Источник

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

Источник

Читайте также:  Php and lock file