Bear Blog blockquote styles
Blockquotes are one of those elements that barely get noticed until they're styled well. Then suddenly they carry weight on the page.
This page collects small CSS tweaks and variations for blockquotes. 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 1 day, 20 hours ago.
Bear mark
blockquote {
margin-inline: 0;
border: 2px solid var(--link-color);
border-radius: 6px;
padding: 0.75em 1.25em;
color: var(--text-color);
font-style: italic;
position: relative;
}
blockquote::after {
content: "ʕ•ᴥ•ʔ";
position: absolute;
inset-block-end: -0.75em;
inset-inline-start: 50%;
transform: translateX(-50%);
padding: 0 0.5em;
font-size: 0.9em;
font-style: normal;
background: var(--background-color);
color: var(--link-color);
}
Left border accent
blockquote {
border-inline-start: 3px solid var(--link-color);
margin-inline-start: 0;
padding-inline-start: 1rem;
font-style: normal;
}
Large quote mark
blockquote {
border-inline-start: none;
color: var(--text-color);
font-style: normal;
position: relative;
padding-inline-start: 2rem;
}
blockquote::before {
content: "“";
position: absolute;
inset-inline-start: 0;
inset-block-start: -0.2rem;
font-size: 2.5rem;
color: var(--link-color);
line-height: 1;
}
Italic muted
blockquote {
border-inline-start: none;
padding-inline-start: 0;
font-style: italic;
color: color-mix(in srgb, var(--text-color), transparent 30%);
}
Background tint
blockquote {
border-inline-start: none;
font-style: normal;
background: color-mix(in srgb, var(--text-color), var(--background-color) 94%);
border-radius: 6px;
padding: 1rem 1.25rem;
}
Quote mark with citation
blockquote {
position: relative;
margin-inline: 0;
padding-block: 0.9em;
padding-inline: 1.5em;
color: var(--text-color);
background-color: color-mix(in srgb, var(--link-color), var(--background-color) 94%);
border-inline-start: 3px solid var(--link-color);
border-radius: 6px;
font-style: normal;
}
blockquote p {
margin-block: 0.4em;
}
blockquote p:first-child {
margin-block-start: 0;
}
blockquote p:last-child {
margin-block-end: 0;
}
blockquote::before {
content: "“";
position: absolute;
inset-block-start: -0.15em;
inset-inline-start: 0.35em;
font-size: 2.2em;
line-height: 1;
color: color-mix(in srgb, var(--link-color), transparent 50%);
}
blockquote cite {
display: block;
margin-block-start: 0.7em;
font-style: normal;
color: color-mix(in srgb, var(--text-color), transparent 40%);
}
blockquote cite::before {
content: "— ";
}
Labeled tag
blockquote {
margin-inline: 0;
border: 2px solid var(--link-color);
border-inline-start: 6px solid var(--link-color);
padding: 0.75em 1.25em;
color: var(--text-color);
font-style: italic;
position: relative;
}
blockquote::before {
content: "QUOTE";
position: absolute;
inset-block-start: -0.75em;
inset-inline-start: 0.8em;
padding: 0 0.4em;
font-size: 0.7em;
font-style: normal;
letter-spacing: 0.08em;
background: var(--background-color);
color: var(--link-color);
}
Heart accent
blockquote {
position: relative;
margin-block: 1.6em;
margin-inline: 0;
padding: 0.85em 1.25em;
border-inline-start: 3px solid var(--link-color);
background: color-mix(in srgb, var(--link-color), var(--background-color) 92%);
color: var(--text-color);
font-style: italic;
border-radius: 8px;
}
blockquote::after {
content: "♥";
position: absolute;
inset-block-end: -0.6em;
inset-inline-end: 1em;
padding-inline: 0.3em;
background-color: var(--background-color);
font-style: normal;
color: var(--link-color);
line-height: 1;
}
blockquote p {
margin-block: 0;
}
Bordered card
blockquote {
position: relative;
margin-block: 1.6em;
margin-inline: 0;
padding: 1.1rem 1.25rem;
border: 1px solid color-mix(in srgb, var(--link-color), var(--background-color) 76%);
border-radius: 8px;
background: color-mix(in srgb, var(--link-color), var(--background-color) 96%);
color: var(--text-color);
font-style: italic;
line-height: 1.65;
}
blockquote p {
margin-block: 0.8em;
}
blockquote p:first-child {
margin-block-start: 0;
}
blockquote p:last-child {
margin-block-end: 0;
}
Minimal
blockquote {
margin-inline: 0;
padding-inline-start: 0;
border-inline-start: none;
font-style: italic;
font-size: 1.1em;
color: color-mix(in srgb, var(--text-color), transparent 15%);
}
Centered quote
blockquote {
margin-block: 2rem;
margin-inline: auto;
max-width: 40ch;
padding-inline-start: 0;
border-inline-start: none;
text-align: center;
font-style: italic;
font-size: 1.2em;
}
blockquote cite {
display: block;
margin-block-start: 1rem;
font-style: normal;
}
blockquote cite::before {
content: "— ";
}
Top rule
blockquote {
margin-inline: 0;
padding-inline-start: 0;
border-inline-start: none;
border-block-start: 3px solid var(--link-color);
padding-block-start: 1rem;
font-style: italic;
}
Corner accent
blockquote {
position: relative;
margin-inline: 0;
padding: 1rem;
padding-inline-start: 1rem;
border-inline-start: none;
font-style: italic;
}
blockquote::before {
content: "";
position: absolute;
inset-block-start: 0;
inset-inline-start: 0;
width: 1rem;
height: 1rem;
border-block-start: 3px solid var(--link-color);
border-inline-start: 3px solid var(--link-color);
}
Double border
blockquote {
margin-inline: 0;
padding-inline-start: 1rem;
border-inline-start: 6px double var(--link-color);
font-style: normal;
}
Want more? Check out the full Bear Blog library.