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

This article introduces the "CSS how to achieve the text color does not change the underline color" related knowledge, in the actual case operation process, many people will encounter such a dilemma, then let the editor lead you to learn how to deal with these situations! I hope you can read it carefully and be able to achieve something!

First, use css border-bottom to change the underline color of text fonts.

Here we underline three groups of text in three different colors. The css is named ".-F00", ".-00F", ".-333".

1. Different font underline colors to achieve complete HTML source code:

Untitled document.-F00 {border-bottom:1px solid # F00} / * CSS Note:.-F00 sets the lower border of the object to red * /.-00F {border-bottom:1px solid # 00F Color:#090} / * CSS Note:.-00F sets the bottom border of the object to blue * /.-333 {border-bottom:1px solid # 333} / * CSS Note:.-333 sets the lower frame of the object to black * /

DIVCSS5 practice text underline color-my underline implementation is red

DIVCSS5 practice text underline color-my underline is blue and the text is green

DIVCSS5 practice text underline color-my underline is implemented as black

2. Screenshot of instance effect of underlining in different colors

Use css border bottom frame style to achieve screenshot of different color underline effect

Through the above DIV+CSS example, we can learn to use the border-bottom style to set the lower border color of the text font to achieve the change of the lower border color style, so as to achieve the effect of underlining color control. We have to realize that text-decoration underline color is changed with the text color change, in other words, use the text-decoration attribute to achieve underline color and text color is synchronized, what the text color, text underline is what color, to change the text and underline text color is different, we can use border-bottom border style.

Second, use css border to realize whether the font underline is solid or dashed.

In addition to using the border-bottom lower border style to change the color of the object's lower border to achieve the ever-changing color effect of underlines, you can also achieve the effect of underlining solid lines or dotted lines by setting solid lines (solid) or dashed lines (dashed) to the css lower border style.

Next, our CSS+DIV example uses border-bottom to change the color of text underlines and dashed solid lines.

1. The complete html source code of CSS div instance is as follows

Www..com. Divcss-aa {border-bottom:1px dashed # F00; color:#0FF} / * set the object. The bottom border of divcss-aa is dotted red, the font color of css is sky blue * /. Divcss-bb {border-bottom:1px solid # 00F; color:#090} / * sets the object. The bottom border of divcss-bb is solid blue, and the font color of object DIV is green * /

Use the lower border to achieve various style effects of font underlining. My underline is dotted red and the font is sky blue.

Use the bottom border to achieve various styles of font underlining. My underline is solid blue and the font is green.

Why to use span tags instead of div tags to set the text object CSS style, you can go to the difference between div and span to understand.

2. Screenshots of the effects of each style of underlining

This is the end of the content of "how to change the text color without underlining in CSS". Thank you for your reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.