Bear Blog tag styles

The default Bear Blog theme keeps tags plain, just a hashtag and a link, both on your posts and in your archive. That leaves a lot of room to give them some more character.

This page collects small CSS tweaks and variations for tags. Each one works out of the box, but they're just as much meant as a starting point. Mix and match, tweak the values, or use them to learn more about theme styling.

Last updated 6 minutes ago.

Simple

Simple tags with smaller text and spacing

.tags a {
    font-size: 0.85em;
    margin-inline-end: 0.6em;
}

Pill tags

.tags a {
    display: inline-block;
    padding: 0.2em 0.8em;
    margin-inline-end: 0.4em;
    margin-block-end: 0.4em;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-color), transparent 92%);
    text-decoration: none;
}

Uppercase tags

Uppercase tags with letter spacing

.tags a {
    font-size: 0.8em;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-inline-end: 0.7em;
    text-decoration: none;
}

Bordered tags

Bordered tags with outlined pill shape

.tags a {
    display: inline-block;
    padding: 0.2em 0.6em;
    margin-inline-end: 0.4em;
    margin-block-end: 0.4em;
    border: 1px solid color-mix(in srgb, var(--text-color), transparent 70%);
    border-radius: 4px;
    font-size: 0.8em;
    text-decoration: none;
}

@media (hover: hover) {
    .tags a:hover {
        border-color: var(--link-color);
        color: var(--link-color);
    }
}

Underline tags

Underline tags, plain text with an underline accent

.tags a {
    margin-inline-end: 0.8em;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    text-decoration-color: var(--link-color);
}

@media (hover: hover) {
    .tags a:hover {
        text-decoration-thickness: 3px;
    }
}

Filled tags

Filled tags, solid background color with light text

.tags a {
    display: inline-block;
    padding: 0.2em 0.7em;
    margin-inline-end: 0.4em;
    margin-block-end: 0.4em;
    background: var(--link-color);
    color: var(--background-color);
    border-radius: 4px;
    font-size: 0.85em;
    text-decoration: none;
}

@media (hover: hover) {
    .tags a:hover {
        opacity: 0.85;
    }
}

Dotted list tags, separated by small dot markers instead of spacing

.tags a {
    text-decoration: none;
}

.tags a:not(:last-child)::after {
    content: "·";
    margin-inline: 0.5em 0.1em;
    color: color-mix(in srgb, var(--text-color), transparent 50%);
    vertical-align: middle;
}

Wobbly tags

Wobbly tags, each tag tilted slightly like a sticker

.tags a {
    display: inline-block;
    padding: 0.15em 0.7em;
    margin-inline: 0.3em 0.5em;
    margin-block-end: 0.6em;
    background: color-mix(in srgb, var(--text-color), transparent 92%);
    border-radius: 4px;
    font-size: 0.85em;
    text-decoration: none;
    transform: rotate(-2deg);
    transition: transform 0.15s ease;
}

.tags a:nth-child(even) {
    transform: rotate(2deg);
}

@media (hover: hover) {
    .tags a:hover {
        transform: rotate(0deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .tags a {
        transition: none;
    }
}

Tag icon

.tags a {
    margin-inline-end: 0.6em;
    text-decoration: none;
}

.tags a::before {
    content: "🏷️ ";
}

Emoji per tag

Match each tag's URL to assign it its own emoji, swap the tag names and icons for your own.

.tags a {
    margin-inline-end: 0.6em;
    text-decoration: none;
}

.tags a[href*="q=writing"]::before {
    content: "✍️ ";
}

.tags a[href*="q=bear"]::before {
    content: "🐻 ";
}

.tags a[href*="q=blogging"]::before {
    content: "🧑‍💻 ";
}

Want more? Check out the full Bear Blog library.