How to remove underline from hyperlink in html? Introduction to the method of removing underline from html hyperlink-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

How to remove underline from hyperlink in html? Introduction to the method of removing underline from html hyperlink

不言

Oct 09, 2018 am 11:25 AM

html

It is always inevitable to use hyperlinks in the development of front-end web pages, but when using hyperlinks, there will be an underline underneath, which sometimes appears very abrupt, inappropriate and unsightly in the web page, so we need to The underline under the hyperlink is removed. The following article will introduce to you how to remove the underline from the hyperlink in html. Friends in need can refer to it. Without further ado, let’s go straight to the text.

To remove the underline of a hyperlink in HTML code, you need the text-decoration attribute in CSS.

For the text-decoration attribute, the parameter we need to define is text-decoration:none; to remove the underline of the hyperlink. (For other parameters in the text-decoration attribute, you can refer to the

css learning manual).

Let’s look directly at the code for removing the underline from a hyperlink in

html.

    <!DOCTYPE html> 
    <html> 
    <head> 
    <meta charset="utf-8"> 
    <style type="text/css">
      a{text-decoration:none}
    </style> 
    </head> 
    <body>欢迎来到<a href="http://www.php.cn/">php中文网</a>！
    </body> 
    </html>

Copy after login

The effect of removing the underline from a hyperlink in html is as follows:

How to remove underline from hyperlink in html? Introduction to the method of removing underline from html hyperlink

What the above code achieves is to In HTML, the underline of a hyperlink is directly removed. However, sometimes we need to remove the underline from a hyperlink, but there is an underline when the mouse stays on it. How to achieve this? Let's take a look at the code directly.

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<style type="text/css">
a:link,a:visited{
 text-decoration:none;  /*超链接无下划线*/
}
a:hover{
 text-decoration:underline;  /*鼠标放上去有下划线*/
}
</style>
</head> 
<body>欢迎来到<a href="http://www.php.cn/">php中文网</a>！
</body> 
</html>

Copy after login

Note: In the above code, the hyperlink is underlined, but underlined when the mouse stays on it. :hover is used, which is a pseudo-class in the style sheet, indicating the state when the mouse is hovering.

The above is the entire content of this article. For more exciting content, you can pay attention to the php Chinese website! ! !

The above is the detailed content of How to remove underline from hyperlink in html? Introduction to the method of removing underline from html hyperlink. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn