Home > Article > Web Front-end > How to add text underline style in css? (detailed code explanation)
How to add text underline style in css? (detailed code explanation)
- 青灯夜游Original
- 2018-10-26 10:20:1341130browse
How to add text underline style in css? This article will introduce to you how to add text underline style in CSS. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.
First of all, let’s take a look at css methods to add text underline styles.
1. The css text-decoration attribute adds text underline style.
2. The css border-bottom attribute adds text underline style.
Below we will provide you with a simple code example. Let’s introduce in detail the implementation methods of these two css to add text underline style!
css text-decoration attribute adds a simple text underline style
Code example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css 文字下划线样式</title>
<style>
.demo span{
text-decoration:underline;
}
</style>
</head>
<body>
<p class="demo">这是一段测试文字，<span>php中文网</span>！</p>
</body>
</html>Rendering:
css The underline added by the text-decoration attribute is the simplest style, and there is no way to set any special style, such as setting the underline into a dotted shape. Let's look at another way to add underline, and you can set different underline styles.
css border-bottom attribute adds text underline style
Code example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css 文字下划线样式</title>
<style>
.demo{
width: 400px;
height: 400px;
margin:100px auto;
}
.demo1 span{
border-bottom: 1px solid #000000;
}
.demo2 span{
border-bottom: 5px solid #0081EF;
}
.demo3 span{
border-bottom: 2px dashed #000000;
}
.demo4 span{
border-bottom: 2px dotted #000000;
}
.demo5 span{
border-bottom: 5px double #000000;
}
</style>
</head>
<body>
<div class="demo">
<p class="demo1">这是第1段测试文字，<span>php中文网</span>！</p>
<p class="demo2">这是第2段测试文字，<span>php中文网</span>！</p>
<p class="demo3">这是第3段测试文字，<span>php中文网</span>！</p>
<p class="demo4">这是第4段测试文字，<span>php中文网</span>！</p>
<p class="demo5">这是第5段测试文字，<span>php中文网</span>！</p>
</div>
</body>
</html>Rendering:
The border-bottom attribute can realize different text underline styles by controlling the thickness, color, and style of the line.
Summary: The above is the entire content of adding text underline style with text-decoration attribute and border-bottom attribute. You can try it yourself to deepen your understanding and use different methods in different situations according to your needs. . I hope it will be helpful to everyone's learning. For more related tutorials, please visit: CSS basic video tutorial, HTML video tutorial, bootstrap video tutorial!
The above is the detailed content of How to add text underline style in css? (detailed code explanation). For more information, please follow other related articles on the PHP Chinese website!