Styling Internal Anchors

Ever seen an interesting link on a large page, middle-clicked it to open it in a new tab and then realised that it was an internal anchor, and you are just loading another copy of the same large page?

To have every internal anchor marked with a small “#” symbol after it, add the following to your userContent.css:

a[href^="#"] {
padding-right: 6px;
background: url("data:image/png,%89PNG%0D%0A%1A%0A%00%00%00%0DIHDR%00%00%00%06\
%00%00%00%08%08%06%00%00%00%DA%C6%8E8%00%00%00%09pHYs%00%00\
%0B%13%00%00%0B%13%01%00%9A%9C%18%00%00%00%07tIME%07%D7%03\
%1D%10%0D*T%0FgN%00%00%00!IDAT%08%D7c%F8%0F%05%0C%0C%0C%A84\
%8C%83%81A%12%BF%FF%FE%23Q%07N%3B%B0%01%D2%25%00N4%8Fj%C7U\
%97%89%00%00%00%00IEND%AEB%60%82") center right no-repeat;
}

7 thoughts on “Styling Internal Anchors

  1. First, your selector does not cover all cases. Imagine doc foo.html and href=”foo.html#bla”. This is local. Your selector does not get it.

    Then you can also write

    a[href^=”#”]:after { content: ” #”; font-size: smaller; }

  2. Of course glazou, foo.html#blah might not be THIS large file… it could simply be a fragment identifier in ANOTHER page, which makes it worth the “load in new tab” as gerv is suggesting here

  3. When you’re using data URIs, base64 is almost always smaller for binary stuff. This might help, it’s more or less the same image:

    data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFAgMAAADwAc52AAAACVBMVE\
    UAAAD7/f7///8qldNwAAAAEklEQVQI12PoaGAAAg8w2dEAABVPAtkqtxQKAAAAAElFTkSuQmCC

    If you’re interested, there’s a perl module “URI::data” that does all this encoding stuff automatically. Really good for things like this.

  4. Thanks Ryan, I was looking for that for years! Extension rocks.
    I think that there is few bugs in bugzilla that request such feature – and I also think that some of it (but not all!) should be included directly in Firefox.
    It is relatively unobtrusive (of course less category are requested for the general public – but I like for example the open/close lock that is only displayed ‘if it is different from the current page’ )

  5. Daniel: Callek has spotted why I didn’t do as you suggest. Sadly, there’s no way of checking whether a link uses the URL form you mention. Fortunately, it’s much less common than the bare “#foo” form.

    ant: I just used Hixie’s data URI kitchen. Looking at it now, I guess I missed the “base64” checkbox.

    Ryan: Thanks, I’ll definitely try that out. It’s a good solution.

  6. Daniel hasn’t suggested anything to do about that limitation, he showed you a simpler (which can also be styled) way of doing what you css does.