Firefox customization: link customization

From Amit’s Thoughts

Firefox 1.0 was released today.

One of the fun things you can do is alter the way Firefox (or Mozilla or Galeon) displays web pages by using custom CSS. Today I changed userContent.css to add these rules:

:link:before {
  content: "\0025c7";
  color: blue;
}

:visited:before {
  content: "\0025c6";
  color: purple;
}

*[href*="=http"]:before {
  content: "\0021b7";
  color: red;
}

*[href^="mailto:"]:before {
  content: "\002709";
  color: red;
}

*[href^="javascript:"]:before {
  content: "\002707";
  color: red;
}

These will display a blue ◇ next to unvisited links, a purple ◆ on visited links, and a red ↷ on links that have another URL embedded inside (usually indicating a tracking redirect), a red ✉ on email links, and a red ✇ on javascript links.

You can pick lots of fun shapes and symbols from Alan Wood’s Unicode page (note: there are lots more pages on his site with lots more symbols). To use a different symbol, just put in its Unicode hexadecimal value in the CSS, with six hex digits (i.e., use a leading 00).

I don’t know if I will keep these customizations, but it’s fun to play with. You can put any text or the value of any attribute before or after any HTML element. Mix this with hover effects for lots of fun! Opera users can also have fun with generated counters (for example, to number all the links on the page).