Shulou(Shulou.com)06/01 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.