Words by c.z.robertson

Dorothea Salo has asked about showing the anchors in an HTML page and has got two responses which utilise Javascript. I figured that this must be possible in CSS, and it is, though I can't seem to get anything as impressive as the Javascript solutions.

So the CSS is as follows:

a[name]:before {
  content: url("file:///path/to/anchor.png")
           "#" attr(name) " "
           !important;
}

*[id]:before {
  content: url("file:///path/to/anchor.png")
           "#" attr(id) " "
           !important;
}

If you have a cool browser like Galeon which lets you define custom stylesheets, you can have this accessible from a menu.

It's not as cool as the Kryogenix technique because you have to reconstruct the URLs manually, but it's pretty neat all the same.

Galeon is a bit temperamental about applying this stylesheet though. Sometimes it works fine, sometimes it doesn't work at all, and I can't figure out why. There's something it dislikes about either the :before pseudo-class or the content rule. It works fine if it's linked to or included in the page itself (but obviously that isn't so helpful). I've been testing it for a while now and I'm afraid to say that it fails more often than it succeeds.