Beispiel:HTML-custom-1.html
Aus SELFHTML-Wiki
<!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>