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:
##● 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!<!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>
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!