Beispiel:HTML-custom-1.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" />
<title>Gedichtzeilen mit custom elements</title>
<style>
blockquote {
	padding: 1em 2em;
	max-width: 24em;
	background: darkred;
	color: white;
}

blockquote > :first-child {
	margin-top: 0;
}

blockquote > footer {
	font-size: 0.9em;
	color: lightgrey;
}

x-line {
	display: block;
	--indent: 0.8em;
	padding-left: var(--indent);
	text-indent: calc(-1 * var(--indent));
}

x-line + br {
	/* for WebKits */
	content: '';
	
	/* visually hidden; for Firefox */
	position: absolute !important;
	height: 1px;
	width: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
}

* {
	background: initial !important;
	color: initial !important;
}

</style>

</head>

<body>
<h1>Gedichtzeilen mit custom elements</h1>
<blockquote>
	<p>
		<x-line>Someday girl I don’t know when were gonna get to that place</x-l><br/>
		<x-line>Where we really want to go and well walk in the sun</x-l><br/>
		<x-line>But till then tramps like us baby we were born to run</x-l>
	</p>
	<footer><cite>Bruce Springsteen, “Born to Run”</cite></footer>
</blockquote>

</body>

</html>