Footnote styling -- done right

tips & tricks
1

So I came up with a nifty footnote style for my site, https://www.javiercabrerabooks.com/, and I wanted to share the style with the community. Small, cute, easy to add to any project. Fully customizable. Easy. Here it is:

image
image.jpg1461×646 276 KB

See the footnote?

Let’s zoom in:

image
image.png953×192 22.6 KB

How? Pretty easy, actually. Here’s the style (scss, don’t pay attention to the font size)

// FOOTNOTES
.footnotes {
    font-family: $roboto;
    font-size: $mod_1*$mod_1*$mod_1*$mod_1 *.4rem; 
}

.footnote-ref a {
    background: #ddf0ff;
    margin: 0 0 0 4px;
    border-radius: 40px;
    padding: 3px 8px;
    font-family: $roboto;
    font-weight: 600;

    &:after {
        content: "*";
        font-size: $mod_1*$mod_1*$mod_1*$mod_1 *.5rem; 
        vertical-align: middle;
        padding-left:4px;
    }
    &:hover {
        color: #fff;
        background: #73b6f5;
    }
}

Feels good!

3 Likes