How to remove the underline of a tag using css? (detailed code explanation)-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

How to remove the underline of a tag using css? (detailed code explanation)

醉折花枝作酒筹

Apr 01, 2021 pm 03:48 PM

html

When writing html hyperlinks, the hyperlink always comes with an underline. If the underline is not needed, we need to remove it. Let's talk about how to remove the underline.

How to remove the underline of a tag using css? (detailed code explanation)

When we use hyperlinks, underlines always appear. Visually, the a tags with underlines always feel strange. And in some requirements, there is no need for underscores to appear, so I will ask, is there any way to prevent underscores from appearing? The answer is: yes.

Let’s first look at the underlined a tag.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>如何去掉html a标签下划线</title>
</head>
<body>
    <div>
        <a href="">这是没有去掉下划线的a标签</a>
    </div>
</body>
</html>

Copy after login

How to remove the underline of a tag using css? (detailed code explanation)

This is the a tag that everyone is most familiar with without removing the underline. Next let's look at the a tag without the underlining.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>如何去掉html a标签下划线</title>
    <style>
        a{
            text-decoration:none;
        }
    </style>
</head>
<body>
    <div>
        <a href="">这是去掉下划线的a标签</a>
    </div>
</body>
</html>

Copy after login

How to remove the underline of a tag using css? (detailed code explanation)

As can be seen from the picture, after adding a line of text-decoration:none; code, the hyperlink will no longer be underlined.

Because text-decoration specifies adding overline, underline or strikethrough to the text. When the attribute value is none, it means that the text is not decorated, so add After this line of code, the a tag has no text decoration.

Isn’t it particularly simple? If you want to remove the underline for a specified hyperlink, you only need to use an inline style in the a tag.

Recommended learning: CSS3 video tutorial

The above is the detailed content of How to remove the underline of a tag using css? (detailed code explanation). 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