Octothorp
If you hover over the above title or any other article title on this blog you might notice an octothorp, also known as hash sign or pound sign, appearing after the title. This is to signal that clicking on the title leads to the permanent link for the blog page with articles. As a blog page can have multiple articles a fragment is used to jump directly to the right article.
I used the following Sass code to achieve the hash sign after the text:
article {
> [id] > a {
color: $heading-color;
}
> [id] > a:hover::after {
content: '#';
padding-left: 4px;
color: $link-color;
}
}
The first rule overrides the color of an anchor element inside an
element having an id
attribute that's a direct descendant of the
article
element. The second rule puts a hash sign after this element
on hover with some additional padding and shows the hash sign using
the link color.
To summarise: clicking on a heading makes the title scroll up (if there is space) and sets the address bar contents to the permalink for the clicked article including a fragment.
This all in preparation for the upcoming version 5.0.0 of tumblelog
which is going to support tags per article and hence requires this
type of linking with fragments.