can a link underline change the color? here's how to use CSS to change the underline color of the connection.
When we design a Web page, depending on the needs, we may want to remove the effect of the link underline. And this effect only need a word can be solved. The code is as follows:
Text-decoration:none;
If you keep the underline of the linked text, the default color attribute is the same color as the linked text, as shown in the following example:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >< HTML xmlns= "http://www.w3.org/1999/xhtml" ><pead><meta http-equiv= "Content-type" content= "text/html"; Charset=utf-8 "/><title>www.webjx.com</title><style type=" text/css "><!--a.texta { Text-decoration:underline; Color: #c00;} a.texta:hover {color: #666;} A.TEXTB {text-decoration:overline color: #069;} a.textb:hover {color: #000;} --></style></pead><body><a href= "http://www.webjx.com/" class= "Texta" >www.webjx.com </a>----underline<br/><br/><a href= "http://www.webjx.com/" class= "TEXTB" >www.webjx.com </a>----overline<br/><br/></p></body></ptml>
[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]
If we want to make the link underline the color of the link text and different colors, how to do? Custom link text underline color, we have two ways to achieve. The first is the method of border, the second is the method of visual dislocation.
Examples of border methods are as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >< HTML xmlns= "http://www.w3.org/1999/xhtml" ><pead><meta http-equiv= "Content-type" content= "text/html"; Charset=utf-8 "/><title>www.webjx.com</title><style type=" text/css "><!--a.texta { Border-bottom: #ccc solid 1px; Text-decoration:none; Color: #c00;} A.texta:hover {border-bottom: #069 solid 1px;text-decoration:none; color: #000;} A.TEXTB {border-top: #ccc solid 1px; text-decoration:none; color: #c00;} a.textb:hover {border-top: #069 solid 1px;text-d Ecoration:none; Color: #000;} --></style></pead><body><a href= "http://www.webjx.com/" class= "Texta" >www.webjx.com </a> <br/><br/><a href= "http://www.webjx.com/" class= "TEXTB" >www.webjx.com</a></ P></body></ptml>
[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]
The method of visual dislocation is as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >< HTML xmlns= "http://www.w3.org/1999/xhtml" ><pead><meta http-equiv= "Content-type" content= "text/html"; Charset=utf-8 "/><title>www.webjx.com</title><style type=" text/css "><!--a{color: #c00; Text-decoration:none;} a:hover {color: #666; text-decoration:underline;} A span {color: #c00;} --></style></pead><body><a href= "http://www.webjx.com/" class= "TEXTB" ><span> Www.webjx.com</span></a></body></ptml>
[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]
The method of visual dislocation is actually to add a span label and define the color of the label to distinguish it from the color underlined by the link text. To change the effect of the underline change of the link text.
How do I make a dashed line with the underline of a link?
When we are browsing the web, we can often see that the underline of the link is a dashed line, or that the underline will change from the dashed line to the solid one when link is in a different state from the hover. How has this effect been achieved?
In fact, this effect is to set the Text-decoration:none. Which is to go beyond the underline of the link. Then add a border line to the link, set the bottom border line different width, line style, color, you can achieve the "underline" into a variety of effects. You can refer to the properties about Border-style.
Let's look at the following code:
A.texta {
Text-decoration:none;
BORDER-BOTTOM:1PX Dashed #ccc/* Bottom border line, 1 pixels, dashed line, color ccc*/
Color: #c00;
}
A.texta:hover {
BORDER-BOTTOM:1PX Solid #c00/* Bottom border line, 1 pixels, solid line, color c00*/
Color: #666;
}
Through these settings, you can achieve the effect of the dashed line to the real lines of change. Dictation is false, seeing is believing, let's look at the following example:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >< HTML xmlns= "http://www.w3.org/1999/xhtml" ><pead><meta http-equiv= "Content-type" content= "text/html"; Charset=utf-8 "/><title>www.webjx.com</title><style type=" text/css "><!--a.texta { Text-decoration:none; border-bottom:1px dashed #ccc; Color: #c00;} A.texta:hover {border-bottom:1px solid #c00; color: #666;} A.TEXTB {text-decoration:none border-bottom:1px dashed #ccc; color: #069;} a.textb:hover {border-bottom:1px dashed #c0 0; Color: #000;} --></style></pead><body><a href= "http://www.webjx.com/" class= "Texta" >www.webjx.com </a><br/><br/><a href= "http://www.webjx.com/" class= "TEXTB" >www.webjx.com</a></ P></body></ptml>
[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
