Home  >  Article  >  Web Front-end  >  How to thicken the line under the a tag in css

How to thicken the line under the a tag in css

WBOY
WBOYOriginal
2021-12-08 10:55:504872browse

In CSS, you can use the "border-bottom" attribute and "text-decoration" attribute to make the line under the a tag thicker. The syntax is "a{text-decoration:none;border-bottom:line Thickness value solid color value;}".

How to thicken the line under the a tag in css

The operating environment of this tutorial: Windows 10 system, CSS3&&HTML5 version, Dell G3 computer.

How to thicken the line under the a tag in css

In css, you can use the border-bottom attribute and text-decoration attribute to Make the line under the a tag thicker. The

text-decoration attribute is used to specify the decoration added to the text. The border-bottom attribute is used to set the bottom border style of the element. Therefore, we can first change the original a tag. Remove the underline and use the lower border of the a tag element as the line under the a tag. In this way, you only need to set the thickness value of the lower border of the a tag.

The example is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        a{
            color:red; 
            border-bottom:5px solid red; 
            text-decoration:none; }
    </style>
</head>
<body>
    <a href="">这是一个a标签</a>
</body>
</html>

Output result:

How to thicken the line under the a tag in css

(Learning video sharing: css video tutorial)

The above is the detailed content of How to thicken the line under the a tag in css. For more information, please follow other related articles on the PHP Chinese website!

Statement:
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