Home > Article > Web Front-end > How to set the underline length in html
How to set the underline length in html
- 青灯夜游Original
- 2021-12-13 16:33:0611764browse
htmlHow to set the underline length: 1. Add the "display: block;" style to the element to turn it into a block-level element; 2. Use the border-bottom attribute to set the underline style; 3. Use the width attribute to control Underline length, syntax "width: length value;".
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
htmlHow to set the underline length
In HTML, you can set the underline style through the border-bottom attribute, and then use the width attribute to control the underline length.
Nesting means that the width of the element must be controllable, even if the width attribute is used, it must be effective.
That is to say, the element must be a block-level element (display: block;) or an inline block-level element (display: inline-block;).
Implementation code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
a{
text-decoration: none;
}
.box{
display: block;
border-bottom:2px solid grey;
width:200px;
}
</style>
</head>
<body>
<a href="#" class="box">About</a><br>
<span class="box">Technology</span>
</body>
</html>
Recommended tutorial: "html video tutorial"
The above is the detailed content of How to set the underline length in html. For more information, please follow other related articles on the PHP Chinese website!