content

Inhalte hinzufügen via Pseudoelemente ::after & ::before

Start des Absatzes und Ende des Absatzes!

Bei Links kann man automatisch den Pfad anzeigen lassen via content: ' ('attr(href)')';






Es können auch Werte von Attributen angezeigt werden mit:
content: "Das wird angezeigt"; > Hier wird der Inhalt des Contents angezeigt
content: 'Das wird angezeigt'; > Hier wird der Inhalt des Contents angezeigt

attr(href); > Hier wird der Wert des Attributs href angezeigt

' (' attr(href) ')'; > Hier wird der Wert des Attributs href in Klammern angezeigt

attr(href) ' ' attr(id); > Hier werden 2 Werte von unterschiedlichen Attributen mit Leerzeichen angezeigt

content: '- 'attr(class)' 'attr(id)' -'; > Hier können mehrere Werte von Attributen angezeigt werden mit einem Lerrzeichen dazwischen und Inhalt darum



Besondere Listenpunkte
ul {
     list-style: none;
     padding: 0;
     margin: 0;
}
li {
     padding-left: 16px;
}
li::before {
     content: "\205C";
     padding-right: 8px;
     color: blue;
}

• Butter
• Haferflocken
• Brot
• Mehl

Das angesprochene Element wird idR. immer auf position:relative; gesetzt, ::before & ::after auf position:absolute;
a {
     color: black;
     text-decoration: none;
     position: relative;
     padding-bottom: 10px;
}
a::after {
     content: "";
     position: absolute;
     bottom: 0;
     left: 0;
     width: 0%;
     border-bottom: 5px double purple;
     transition: all 0.3s ease;
}
a::after {
     width: 100%;
}

Beispiel link aktiv



Beispiel link



Beispiel link



Tooltips (attribut title für diese Option ungeeignet > title_alt

Hier ist Beispieltext mit einem Link zu einem Ziel. Und bei einem anderen Link steht dann auch ein anderer Tooltiptext.

Hintergrundbild mit Filter im body


body {
     margin: 0;
     padding: 0;
}
body::before {
     content: '';
     position: fixed;
     width: 100vw;
     height: 100vh;
     background-image: url('http://volterra.bplaced.de/1.jpg');
     background-size; cover;
     background-position: center;
     filter: blur(4px);
     z-index: -1;
}



Content entfernen
content: none;


Bilder via Content hinzufügen
content: url("bild.png");


Zeilenumbrüche oder nicht & Leerzeichen
::before > white-space: pre; im content hinten ein \A
::after > white-space: pre; im content vorn ein \A
white-space: nowrap; > kein Umbuch
Erzwungenes Leerzeichen = \00a0 bzw. \00A0


Sonderzeichen in den content
Ein Ü wird zu \0000DC
Um den richtigen Code zu finden einfach das Zeichen raussuchen und den Dezimalwert (sonderzeichen.de) in einen Hexadezimalwert umwandeln.
http://tobias-otte.de/2007/09/css-sonderzeichen-im-content
Dezimalwert # entfernen, dann in Hexadezimal umwandeln und vorn \ hinzufügen
bzw. #x entfernen auf sonderzeichen.de