Home > Article > Web Front-end > How to change the underline color in html

How to change the underline color in html

醉折花枝作酒筹Original: 2021-06-08 10:31:1221336browse

Method: 1. Set the "text-decoration: underline; color: color value" style to the element; 2. Use the border-bottom attribute, and only need to set the "border-bottom: size style color" to the element. "Style is enough.

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

There are two methods

● The first is to add a text-decoration:underline attribute to the label. To set the color of the underline, you need to set the color attribute of the element. The disadvantage is The text color and underline color are the same and cannot be controlled separately.

Example:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
      .css-00F {
        text-decoration:underline;
        color: #090;
      }
    </style>
  </head>
  <body>
    <p>
      css实践之文字下划线颜色-<span class="css-00F">我的下划线与文字为绿色</span>
    </p>
  </body>
</html>

Effect:

How to change the underline color in html

##● The second one is to add a bottom border to the label: border-bottom:1px solid red, if you want to have space between it and the text, just use the padding-bottom attribute! The second style can be controlled individually!

(Recommended learning: CSS video tutorial)

Where the text underline style needs to be changed, use the css border-bottom bottom border style to flexibly replace the text-decoration underline style. Effect; by setting the bottom border color, bottom border width, bottom border dashed line or solid line and other CSS style controls on the text, various underline effects can be achieved.

Example:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
      .css-F00 {
        border-bottom: 1px solid #f00;
      }
      .css-00F {
        border-bottom: 1px solid #00f;
        color: #090;
      }
      .css-333 {
        border-bottom: 1px solid #333;
      }
    </style>
  </head>
  <body>
    <p>css实践之文字下划线颜色-<span class="css-F00">我的下划线实现为红色</span></p>
    <p>css实践之文字下划线颜色-<span class="css-00F">我的下划线实现为蓝色，文字为绿色</span></p>
    <p>css实践之文字下划线颜色-<span class="css-333">我的下划线实现为黑色</span></p>
  </body>
</html>

Effect:

How to change the underline color in html

Recommended learning:

html video tutorial

The above is the detailed content of How to change the underline color in html. For more information, please follow other related articles on the PHP Chinese website!

html5 css css3 html padding border

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

Previous article：There are several ways to position htmlNext article：There are several ways to position html

See more

How to change the underline color in html

Related articles