Usability: Anchors everywhere

After adding clickable anchor links to every headline I longed for more: Make it possible to reference every paragraph and list item on my blog posts.

Adding IDs

The first step was adding an id attribute to every tag I wanted to link. Doing that manually is a pain, so I had to get it automated.

My idea was to take the ID of the previous headline and add some counting suffix. For example, the first paragraph following a headline with id="foo" would get id="foo-p1". Prefixing the number with a letter (p for paragraph, h for heading, l for list item) is necessary to keep the IDs stable when regenerating them. Adding a new list item does for example not change the numbers of the paragraphs.

The resulting code can be found in my pastebin: add ID attributes to all content tags of an xhtml page .

Showing clickable links

I followed the same pattern as before by adding empty anchor links at the end of a content tag:

<a class="anchorlink" href="#p1"></a>

I gave the content tags a position: relative and the anchor link tags position: absolute so I could put them at a position relative to the content tag.

Then they got a left position of -3ex and a padding of 3ex to keep them aligned to the content tag:

*[id] {
    /* make anchor links positionable */
    position: relative;
/* show IDs for anchors */
*[id]:hover > a.anchorlink:before {
    content: "\00B6";/* pilcrow */
    color: #888;
    font-size: smaller;
a.anchorlink {
    text-decoration: none;
    margin-left: 0.5em;
    font-size: smaller;
    position: absolute;
    top: 0px;
    left: -3ex;
    padding-right: 3ex;
    height: 100%;


Written by Christian Weiske.

Comments? Please send an e-mail.