Beispiel:Q-Element-2.html
<!DOCTYPE html> <html lang="de"> <head>
<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" media="screen" href="./Beispiel:Grundlayout.css">
<style>
- , ::before, ::after { box-sizing: border-box }
- container {
padding: 2em 2em 2em 5em; }
p { position: relative; }
p::before { content: attr(lang); position: absolute; right: 100%; min-width: 3ch; text-align: center; white-space: nowrap; padding: 0 0.25em; margin-right: 0.5em; background: black; color: white; font: 0.8em Fira Sans, sans-serif; } </style> <title>Zitate mit Anführungszeichen</title> </head>
<body>
Zitate mit Anführungszeichen
<main id="container">
Martin Luther King said: I have a dream!
Martin Luther King sagte: Ich habe einen Traum!
Martin Luther King sagte: Ich habe einen Traum!
Martin Luther King powiedział: Mam marzenie!
Мартин Лютер Кинг сказал: У меня есть мечта!
Je nach verwendetem Sprachkürzel (siehe Angabe im vorangestellten Pseudoelement) werden verschiedene Anführungszeichen gerendert.
</main>
</body> </html>
