CSS blockquote – så stylar du citat snyggt på din webbsida

HTML-elementet <blockquote> har funnits sedan tidernas begynnelse, men webbläsarnas standardstil — en indragen textblock med lite extra marginal — gör det sällan rättvisa. Med CSS kan du göra citaten till riktiga blickfång som bryter av textflödet och ger visuellt intresse åt sidan.

Här går vi igenom hur du stylar blockquote med CSS, från grundläggande formatering till mer avancerade tekniker med pseudoelement och responsiv design.

Grundläggande blockquote CSS

Webbläsarnas default för <blockquote> är ungefär 40 pixlars marginal åt vänster. Det signalerar ”indraget citat”, men det ser likadant ut överallt och ger ingen visuell tyngd. Låt oss börja med att nollställa och bygga en renare bas:

blockquote {
  margin: 2rem 0;
  padding: 1.5rem 1.5rem 1.5rem 2rem;
  border-left: 4px solid #2563eb;
  background-color: #f8fafc;
  font-size: 1.1rem;
  line-height: 1.7;
  color: #334155;
}

blockquote p {
  margin: 0;
}

blockquote cite {
  display: block;
  margin-top: 0.75rem;
  font-size: 0.9rem;
  color: #64748b;
  font-style: normal;
}

Den klassiska vänsterkanten med border-left är en beprövad designkonvention som omedelbart signalerar ”det här är ett citat”. Den subtila bakgrundsfärgen separerar citatet visuellt från brödtexten. Att sätta margin: 0 på blockquote p tar bort den extra marginalen som webbläsaren lägger till inuti citatet.

Styla blockquote med citattecken i CSS

Vill du ha dekorativa citattecken — de stora typografiska tecknen som ger en mer editorial känsla — kan du använda ::before för att lägga in dem utan att röra HTML:en:

blockquote {
  position: relative;
  margin: 2.5rem 0;
  padding: 2rem 2rem 2rem 3.5rem;
  border: none;
  background-color: #f8fafc;
  border-radius: 8px;
  font-size: 1.1rem;
  line-height: 1.7;
  color: #334155;
}

blockquote::before {
  content: "\201C";
  position: absolute;
  top: -0.2rem;
  left: 0.75rem;
  font-size: 4rem;
  font-family: Georgia, "Times New Roman", serif;
  color: #2563eb;
  line-height: 1;
}

Unicode-tecknet \201C är ett vänster-dubbelcitattecken. Genom att positionera det absolut mot blockquoten hamnar det snyggt i det övre vänstra hörnet utan att påverka textflödet. font-family: Georgia ger det en mer traditionell, typografisk look — sans-serif-citattecken ser sällan lika bra ut.

Variera CSS-citatstilen med pseudoelement

Du kan kombinera ::before och ::after för att skapa mer avancerade effekter. Här är en variant med en dekorativ linje under citatet:

blockquote::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  background-color: #2563eb;
  margin-top: 1.25rem;
  border-radius: 2px;
}

Det skapar en kort, färgad linje efter citattexten som fungerar som en visuell avslutning. Kombinerat med ::before-citattecknet får du ett citat som ser genomarbetat ut med minimal CSS.

Responsiva blockquotes med CSS

Citat som ser bra ut på desktop kan bli problematiska på mobil. Stor font-size, generös padding och absolut-positionerade citattecken kan ta upp för mycket plats på en smal skärm. Använd clamp() för att skala mjukt:

blockquote {
  padding: clamp(1rem, 3vw, 2rem) clamp(1rem, 3vw, 2rem) clamp(1rem, 3vw, 2rem) clamp(1.5rem, 5vw, 3.5rem);
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
}

blockquote::before {
  font-size: clamp(2.5rem, 2rem + 2vw, 4rem);
  left: clamp(0.3rem, 1vw, 0.75rem);
}

Med clamp() slipper du mediaqueries för att hantera storleksändringar — allt skalas proportionellt med viewport-bredden.

Blockquote i dark mode och med nästlade citat

Om din sajt stöder dark mode behöver citatens bakgrundsfärg och border anpassas. CSS custom properties gör det smidigt:

:root {
  --blockquote-bg: #f8fafc;
  --blockquote-border: #2563eb;
  --blockquote-text: #334155;
  --blockquote-cite: #64748b;
}

@media (prefers-color-scheme: dark) {
  :root {
    --blockquote-bg: #1e293b;
    --blockquote-border: #60a5fa;
    --blockquote-text: #e2e8f0;
    --blockquote-cite: #94a3b8;
  }
}

blockquote {
  background-color: var(--blockquote-bg);
  border-left-color: var(--blockquote-border);
  color: var(--blockquote-text);
}

Nästlade citat — ett citat inuti ett citat — kan du differentiera visuellt med en smalare border och en något annorlunda bakgrundsfärg:

blockquote blockquote {
  border-left-width: 2px;
  background-color: rgba(0, 0, 0, 0.03);
  margin: 1rem 0;
}

Det ger tillräcklig visuell skillnad utan att överkomplicera designen.

Tillgänglighet: citat som fungerar för alla

Korrekt semantik är grunden. Använd <blockquote> för längre citat och <q> för inline-citat. Ange alltid källan med <cite> eller cite-attributet:

<blockquote cite="https://example.com/original-artikel">
  <p>Design handlar inte bara om hur det ser ut. Design handlar om hur det fungerar.</p>
  <cite>— Steve Jobs</cite>
</blockquote>

Skärmläsare identifierar <blockquote> som ett citat, vilket ger användaren kontext. Se till att kontrastförhållandet mellan citattext och bakgrund klarar WCAG AA — det gäller även cite-elementet, som ofta stylas i en ljusare nyans. Med bakgrundsfärgen #f8fafc och textfärgen #64748b på cite hamnar du på ett kontrastförhållande på ungefär 4.6:1, precis ovanför gränsen. Ljusare textfärger kräver att du kollar med ett kontrastverktyg.

Undvik också att göra citattecken i ::before till meningsbärande innehåll — de är dekorativa och ska inte påverka uppläsningen. Eftersom content i pseudoelement läses upp av vissa skärmläsare kan du lägga till aria-hidden="true" på blockquoten om citattecknet skapar förvirring, men i praktiken hanterar de flesta moderna skärmläsare Unicode-citattecken korrekt.

Sammanfattning

CSS blockquote-styling är ett av de enklare sätten att ge en sida mer visuell personlighet. Börja med en tydlig border-left eller bakgrundsfärg för att skilja citatet från brödtexten. Använd ::before med Unicode-citattecken för en editorial känsla utan extra HTML. Skala padding och fontstorlek med clamp() för responsivitet. Och se till att semantiken är korrekt — <blockquote>, <cite> och tillräcklig kontrast gör att citaten fungerar för alla.