How to set underline in html-HTML Tutorial-php.cn

Table of Contents

这是标题 4

Home

Web Front-end

HTML Tutorial

How to set underline in html

藏色散人

Jun 03, 2021 am 10:17 AM

html

htmlHow to set underline: 1. Add underline to text through "text-decoration" attribute; 2. Set box underline through "border-bottom"; 3. Simulate underline through "linear-gradient()" .

How to set underline in html

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

Several implementation schemes of underline in css

When writing styles for text or a certain layout box, in order to make it look better or more conspicuous, it may be used Underline, record several implementation options here.

Text underline

It is actually relatively simple to add underline to text

text-decoration attribute

This attribute allows you to set certain effects, such as underlining. If the descendant element does not have its own decorations, the decorations set on the ancestor element will "extend" to the descendant elements. User agents are not required to support blink.

To put it simply, this attribute can set decorative effects for text, such as strikethrough, underline, etc.

The most commonly used one is to remove the default underline style of the a tag.

Example:

<html>
<head>
    <style type="text/css">
        h1 {
            text-decoration: overline
        }
        h2 {
            text-decoration: line-through
        }
        h3 {
            text-decoration: underline
        }
        h4 {
            text-decoration: blink
        }
        a {
            text-decoration: none
        }
    </style>
</head>
<body>
    <h1 id="这是标题-nbsp">这是标题 1</h1>
    <h2 id="这是标题-nbsp">这是标题 2</h2>
    <h3 id="这是标题-nbsp">这是标题 3</h3>
    <h4 id="这是标题-nbsp">这是标题 4</h4>
    <p>
        <a href="http://www.w3school.com.cn/index.html">这是一个链接</a>
    </p>
</body>
</html>

Copy after login

How to set underline in html

Example 1

(The color of text modification can be set through color)

BoxUnderline

border-bottom

border-bottom abbreviation property sets all bottom border properties in a declaration.

The properties that can be set are (in order): border-bottom-width, border-bottom-style, and border-bottom-color.

border-bottom By setting the lower border of the box , can play the role of simulating underlines

Example:

border-bottom: 1px solid #dbdbdb;  
border-top:0px;  
border-left:0px;  
border-right:0px;

Copy after login

How to set underline in html

Example 2

linear-gradient()

The linear-gradient() function is used to create an "image" of a linear gradient.

In order to create a linear gradient, you need to set a starting point and a direction (specified as an angle) of the gradient effect. You also need to define the end color. The stop color is the smooth transition you want Gecko to make, and you must specify at least two, although you can specify more colors to create more complex gradient effects.

This css function is not very common. Its function is to create a picture.

Use gradient function to simulate underline

. In fact, you set the background image, and then set the width and height to make it look like an underline.

Example:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
.test::after {
content: "";
display: block;
    background: linear-gradient(to right, #188eee, #999);
    width: 100%;
    height: 1px;
}
</style>
</head>
<body>
<div class=&#39;test&#39;>
<p class=&#39;box&#39;>内容</p>
</div>
</body>
</html>

Copy after login

How to set underline in html

Example 3

The underline created by this method is the most customizable.

You can draw nice underlines and even define animations~

[Recommended learning: html video tutorial】

The above is the detailed content of How to set underline in html. 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