How to set css underline? Introduction to how to set text underline in css-CSS Tutorial-php.cn

How to set css underline? Introduction to how to set text underline in css

不言

Release： 2018-10-27 11:16:58

Original

9972 people have browsed it

By default, text fonts on web pages do not have an underline style, but sometimes we will see an underline under text that is not a link on a web page. So how is this underline style implemented? This article will introduce to you how to set text underline in CSS. Next, let’s take a look at the specific content.

There is a text-decoration attribute in css. This attribute is used to implement text underline. The code to implement text underline is also very simple.

The code for text-decoration attribute to implement text underline is as follows :

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        div{
            text-decoration: underline;
        }
    </style>
</head>
<body>
<div>php中文网文字加下划线</div>
</body>
</html>

Copy after login

The effect of setting text underline in css is as follows:

How to set css underline? Introduction to how to set text underline in css

Isn’t the above method very simple? You only need to give the text a style to add an underline. In fact, there is another way to underline text in CSS, which is to use the border attribute of CSS. Let’s take a closer look at how the border attribute in CSS can underline text.

The border attribute can be used to achieve the text underline effect through the lower border border-bottom. Let’s take a closer look at the code to achieve text underline

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        span{
            border-bottom: 1px solid pink;
        }
        
    </style>
</head>
<body>
<span>中文网文字下划线</span>
</body>
</html>

Copy after login

The text underline effect is as follows:

How to set css underline? Introduction to how to set text underline in css

If you want to change the text underline to a dotted line, you only need to change the solid in the above code to dashed or dotted.

Finally, as to why span is used instead of div in the above code, it is because the div tag occupies one line, and the span tag occupies as much space as the content is wide, so it is relatively simple to use the span tag. .

The above is the detailed content of How to set css underline? Introduction to how to set text underline in css. For more information, please follow other related articles on the PHP Chinese website!