How to remove the underline of a hyperlink using three simple examples

To remove the underline of a hyperlink, you need to use the style sheet CSS. If you don't want to learn the concept of CSS in depth for the time being, here are three simple examples to illustrate how to control the underline of a hyperlink. Use Notepad to open the source code of the web page (you can also open the web page with IE first, and then click "View → Source File" on the IE menu bar), and then the Notepad window will pop up.

Find the <head> and </head> lines and add the style sheet statement between them. as follows:

Copy code

The code is as follows:

<html>
<head>
<style>a{TEXT-DECORATION:none}</style>
</head><body>

1. Just add <style>a{ TEXT-DECORATION:none }</style> between head and head
This sentence removes the underline of the hyperlink. This is the simplest example. You will succeed if you try it.

2. The above example only tells you how to remove the underline of hyperlinks at one time. What should you do if some hyperlinks on your web page need to be underlined and some do not? First of all, you need to think about whether most of the hyperlinks on your web pages are underlined or not?
If most hyperlinks do not need to be underlined, you can add
<style> a{ TEXT-DECORATION:none }</style>, and then use this method in a few hyperlinks that need to be underlined, and they will be underlined:
<a href=****><u>Text</a>.
If most hyperlinks are to be underlined, you don’t need to include the above sentence. Change it to: <style>.n{ TEXT-DECORATION:none }</style>,
Note: There is a dot in front of n, which indicates a class selector. Then it can be referenced multiple times in the hyperlinks of a web page, and individual hyperlinks can be removed separately, for example:

Copy code

The code is as follows:

<a class=n href=http://www.webshu.com>Web Tree</a>
<a class=n href=http://www.cctv.com>China Central Television</a>
<a class=n href=http://www.ziyy.com>Freestyle Swimming Network</a>

3. How to remove the underline of a hyperlink so that it remains underlined when the mouse hovers over it?
You can add a sentence like this between head and head: <style>a{ TEXT-DECORATION:none}a:hover{TEXT-DECORATION:underline }</style>
Note: a represents a hyperlink, and a:hover is a pseudo-class in the style sheet, indicating the state when the mouse is hovering.
Determine what effect you want for most of the hyperlinks on your web pages. Let me give you another example:

Copy code

The code is as follows:

After adding this sentence, all hyperlinks in the web page will not be underlined.
As can be seen above, we have used CSS pseudo-classes again. Its definition format is: selector.class selector {attribute;attribute value}, for example,
a.xh{ TEXT-DECORATION:none }.

<<: Solve the problem that ElementUI custom CSS style does not take effect

>>: Implementing a simple Christmas game with JavaScript

How to remove the underline of a hyperlink using three simple examples

Vue's Render function

calc() to achieve full screen background fixed width content

MySQL 5.7 installation and configuration tutorial under CentOS7 (YUM)

The implementation code of the CSS3 input box is similar to the animation effect of Google login

Example of how to deploy Spring Boot using Docker

Introduction to the use of MySQL performance stress benchmark tool sysbench

How to implement Mysql scheduled tasks under Linux

mysql5.7.17.msi installation graphic tutorial

Detailed explanation of the steps to build a Vue project with Vue-cli

Detailed steps for Linux firewall configuration (based on yum warehouse configuration)

Recommend

Vue project code splitting solution

Solution to the Docker container being unable to access the host port

Detailed explanation of Angular routing sub-routes

Implementation of Docker Compose multi-container deployment

Analysis of uniapp entry-level nvue climbing pit record

WeChat applet custom scroll-view example code

A brief discussion on macrotasks and microtasks in js

The implementation code of the CSS3 input box is similar to the animation effect of Google login

A brief talk about React Router's history

WeChat applet implements the snake game

Tips and precautions for using MySQL index

How to submit a pure HTML page, pass parameters, and verify identity

Example of how to embed H5 in WeChat applet webView

CSS clicks on the radio to switch between two image styles and only one of the multiple radios can be checked

Introduction to root directory expansion under Linux system