How to change the underline color in html-HTML Tutorial-php.cn

How to change the underline color in html

醉折花枝作酒筹

Release： 2023-01-06 11:16:49

Original

21778 people have browsed it

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.

How to change the underline color in html

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>

Copy after login

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>

Copy after login

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!