How do I make the underline of the link into a dotted line?

When browsing the web page, we often see that the underline of the link is a dotted line, or in different states between the link and the hover, the underline will change from the dotted line to the solid line. How can this effect be achieved?
In fact, the result is to set text-decoration: none. That is, remove the underline of the link. Then add the lower frame to the link and set the width, line type, and color of the lower frame to make the "underline" more effective. For more information, see border-style attributes.
Let's look at the following code:

The code is as follows:	Copy code
A. texta { Text-decoration: none; Border-bottom: 1px dashed # ccc;/* bottom frame, 1 pixel, dotted line, color ccc */ Color: # c00; }  A. texta: hover { Border-bottom: 1px solid # c00;/* bottom frame, 1 pixel, solid line, color c00 */ Color: #666; }

Through the above settings, you can achieve the effect of changing from dotted lines to solid lines.