How to add text underline style in css
This article mainly explains "how to add text underlining style in css". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Next let the editor to take you to learn "css how to add text underline style" bar!
First of all, let's take a look at the ways to add text underline styles to css.
1. Add a text underline style to the csstext-decoration attribute
2. Add text underline style to cssborder-bottom attribute
Below we pass the simple code example, introduce the realization method of these two kinds of css to add the text underline style in detail for you!
The csstext-decoration property adds a simple text underline style
Code example:
Css text underline style
.demospan {
Text-decoration:underline
}
This is a test text, php Chinese website!
Effect picture:
1.jpg
The underscore added by the csstext-decoration attribute is the simplest style, and there is no way to set anything special, such as setting the underscore to a dotted one. Let's take a look at another way to add underscores, which can set different underline styles.
The cssborder-bottom property adds a text underline style
Code example:
Css text underline style
.demo {
Width:400px
Height:400px
Margin:100pxauto
}
.demo1span {
Border-bottom:1pxsolid#000000
}
.demo2span {
Border-bottom:5pxsolid#0081EF
}
.demo3span {
Border-bottom:2pxdashed#000000
}
.demo4span {
Border-bottom:2pxdotted#000000
}
.demo5span {
Border-bottom:5pxdouble#000000
}
This is the first paragraph of the test text, php Chinese!
This is the second paragraph of the test text, php Chinese!
This is the third paragraph of the test text, php Chinese website!
This is the fourth paragraph of the test text, php Chinese website!
This is the fifth paragraph of the test text, php Chinese website!
At this point, I believe that everyone on the "css how to add text underline style" have a deeper understanding, might as well to the actual operation of it! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!
