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%;
}

Demo​