Beispiel:CSS2 content-text-grafik-attr.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">
<link rel="stylesheet" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css" />
<title>content</title>
<style>
body {
width: 30em;
font-family: sans-serif;
}
p {
border: 1px solid red;
padding: 0.5em;
}
p::before {
display: block;
background: red;
color: white;
font: bold 16px sans-serif;
margin: -0.5em -0.5em 0.5em -0.5em;
padding: 0.5em;
content: attr(class);
}
abbr {
background: lightgreen;
color: white;
}
abbr::before, abbr::after {
content: "*";
}
a {
color: #780000;
}
a::after {
content: url("https://src.selfhtml.org/dok.gif");
margin-left: .1em;
}
</style>
</head>
<body>
<h1>content</h1>
<main>
<p class="Achtung">
Der Begriff <abbr>CSS</abbr> ist eine Abkürzung.
Für weiterführende Informationen schlagen Sie bitte im
<a href="https://wiki.selfhtml.org">SELFHTML-Wiki</a>
nach.
</p>
</main>
</body>
</html>
