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 40 minutes 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;
top: -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) 70%, transparent);
}
Background tint
blockquote {
border-inline-start: none;
font-style: normal;
background: color-mix(in srgb, var(--text-color) 6%, var(--background-color));
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) 6%, var(--background-color));
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) 50%, transparent);
}
blockquote cite {
display: block;
margin-block-start: 0.7em;
font-style: normal;
color: color-mix(in srgb, var(--text-color) 60%, transparent);
}
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) 8%, var(--background-color));
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) 24%, var(--background-color));
border-radius: 8px;
background: color-mix(in srgb, var(--link-color) 4%, var(--background-color));
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) 85%, transparent);
}
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.