Beispiel:HTML-q-Element-2.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche 
<!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:SELFHTML-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>
  <h1>Zitate mit Anführungszeichen</h1>
  
  <main id="container">
<p lang="en">Martin Luther King said: <q>I have a dream!</q></p>
<p lang="de">Martin Luther King sagte: <q>Ich habe einen Traum!</q></p>
<p lang="de-CH">Martin Luther King sagte: <q>Ich habe einen Traum!</q></p>
<p lang="pl">Martin Luther King powiedział: <q>Mam marzenie!</q></p>
<p lang="ru">Мартин Лютер Кинг сказал: <q>У меня есть мечта!</q></p>

<p id="hinweis">Je nach verwendetem Sprachkürzel (siehe Angabe im vorangestellten Pseudoelement) werden verschiedene Anführungszeichen gerendert.<br> Im Firefox wird dies nicht berücksichtigt.</p>
  </main>

</body>
</html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:HTML-q-Element-2.html&oldid=60132“