Multicolored Links

Article published on November 24, 2005 under CSS

CSS can be used to achieve some special effects to links and render them multicolored like the following one: internotredici. The basic idea is to take advantage of the CSS attribute selector which can be used to match specific HTML elements that have a particular attribute value. In our example this selector needs to match HTML links that have a class attribute with “internotredici” value:

a[class="internotredici"]
{
   border-bottom: 1px solid #900;
   background: transparent;
   color: #900;

   text-decoration: none;
}

To set hover effects to this links we have to use the classic :hover selector as follows:

a[class="internotredici"]:hover 
{
   background: #900;
   color: #fc3;
}

The code written till now makes browser render links in dark red with an hover effect in yellow with dark red background. Now is time to include the portion of code that renders the second link color. To obtain this effect we will took advantage of child selector and span element:

a[class="internotredici"] > span 
{
   border-bottom: 1px solid #fc3 !important;
   border-width: 0;
   color: #fc3;
   background: transparent;
}

a[class="internotredici"]:hover > span 
{
   border-bottom: 1px solid #fc3;
   background: #fc3;
   color: #900;
}

First block of code tells browser to render span contained in link with class “internotredici” in yellow with yellow bottom border. Take care that border-width: 0; is needed to remove unnecessary borders in span element maintaining only the bottom one (that was previously marked as important). Hover effect render link in dark red with yellow background and removes border coloring it with the same background color.

Cool, but...

This technique function only on modern browsers that support attribute selector and :hover for every HTML element. Internet Explorer and older versions of Opera browser does not provide support to such selectors so is needed to turn them off. The best solution is to use a CSS filter: the Owen hack, so I added at the beginning of every CSS declaration the selector head:first-child+body in order to hide the block for older and incompatibles browsers.

IE 5.0 had also problems rendering span borders inside an a element so using a CSS filter we'll disable borders for spans:

@media tty
{
   /* Visible only to IE 5.0 */
   i{content:"\";/*" "*/}}; 
   #footer span {border-bottom: none;}; {;}/*";}
   i{content:"\";/*" "*/}}; 
   #footer a:hover span {border-bottom: none;}; {;}/*";}
}/* */

Grand final

And here is the complete CSS code:

head:first-child+body a[class="internotredici"]
{
   border-bottom: 1px solid #900;
   background: transparent;
   color: #900;

   text-decoration: none;
}

head:first-child+body a[class="internotredici"]:hover 
{
   background: #900;
   color: #fc3;
}

head:first-child+body a[class="internotredici"] > span 
{
   border-bottom: 1px solid #fc3 !important;
   border-width: 0;
   color: #fc3;
   background: transparent;
}

head:first-child+body a[class="internotredici"]:hover > span 
{
   border-bottom: 1px solid #fc3;
   background: #fc3;
   color: #900;
}

@media tty
{
   /* Visible only to IE 5.0 */
   i{content:"\";/*" "*/}}; 
   #footer span {border-bottom: none;}; {;}/*";}
   i{content:"\";/*" "*/}}; 
   #footer a:hover span {border-bottom: none;}; {;}/*";}
}/* */

... and the related HTML:

<a href="/" class="internotredici" title="Go to home page">
interno <span>tredici</span>
</a>