Home  >  Article  >  Web Front-end  >  How to add underline in css

How to add underline in css

藏色散人
藏色散人Original
2021-04-19 14:30:1917835browse

How to add underline in css: 1. Use "text-decoration:underline" to set the text underline; 2. Set the border of the div to achieve the underline effect.

How to add underline in css

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

Generally there are two methods:

First, set the text underline through the CSS underline code: text-decoration:underline.

The example demonstration is as follows:

1. The example code is as follows:

How to add underline in css

The page effect is as follows:

How to add underline in css

[Recommended learning: css video tutorial]

2. Modify the txt style in step 1 and add text-decoration:underline.

How to add underline in css

At this time, the page effect is as follows, with underlines appearing.

How to add underline in css

Second, achieve the effect by setting the border of the div:

The example is as follows:

On the initial code of the first method , add two key styles: border-bottom: 1px solid black and padding-bottom: 10px, as follows:

How to add underline in css

The page effect at this time is as follows:

How to add underline in css

The above is the detailed content of How to add underline 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