Vorlage:Listenstile/styles.css: Unterschied zwischen den Versionen
Zur Navigation springen
Zur Suche springen
Sonne7 (Diskussion | Beiträge) ((Erweiterung) CSS-Code um die neue Anzeige-Klasse 'liste-anzahl' nun ergänzt (konkret via dem Tag 'span' anwendbar) - Anm.: Für die Nutzung via einem klassifizierten 'span'-Tag ohne Inhalt (also konkret nur ' <span class="liste-anzahl"></span> ') -- jedenfalls nach dem gesamten 'ul'-Tag mit dessen Liste der 'li'-Tags aber noch innerhalb vom klassifizierten 'div'-Tag nutzbar (also konkret zwischen ' <div class="liste-zaehler"> ' und ' </div> ')) |
Sonne7 (Diskussion | Beiträge) ((Korrektur) CSS-Code punktuell korrigiert und modifiziert - konkret 1. Erweiterung der Stil-Regel für 'li::before' um einen rechten Außenabstand (konkret 'margin-right: 6px;') eingefügt, 2. Entfernung der inkorrekten Content-Regel für 'li:first-child::before' (also den Inhalt von '::before' für das 1. <li> in <ul> in dem <div> mit den beiden Klassen 'liste-zaehler' und 'liste-display' welches v.a. 'content: attr(data-zaehler-spalte);' enthielt)) |
||
| Zeile 12: | Zeile 12: | ||
border-top: 1px solid #777777; | border-top: 1px solid #777777; | ||
border-bottom: 1px solid #777777; | border-bottom: 1px solid #777777; | ||
margin-right: 6px; | |||
text-align: right; | text-align: right; | ||
font-size: 80%; | font-size: 80%; | ||
| Zeile 23: | Zeile 24: | ||
div.liste-zaehler.liste-display ul li::before { | div.liste-zaehler.liste-display ul li::before { | ||
content: attr(data-zaehler-vor) counter(listZaehler) attr(data-zaehler-nach); | content: attr(data-zaehler-vor) counter(listZaehler) attr(data-zaehler-nach); | ||
} | } | ||
Aktuelle Version vom 7. November 2024, 05:40 Uhr
/* Definition von liste-zaehler */
/* - Klasse 'liste-zaehler' für die Definition und Berechnung */
/* - Klasse 'liste-display' für die Anzeige bei jedem Element */
div.liste-zaehler {
counter-reset: listZaehler;
}
div.liste-zaehler.liste-display ul li::before {
display: inline-block;
padding-right: 0.5em;
padding-left: 0.5em;
border-top: 1px solid #777777;
border-bottom: 1px solid #777777;
margin-right: 6px;
text-align: right;
font-size: 80%;
vertical-align: inherit;
background-color: #eaecf0;
content: "";
}
div.liste-zaehler ul li {
counter-increment: listZaehler;
}
div.liste-zaehler.liste-display ul li::before {
content: attr(data-zaehler-vor) counter(listZaehler) attr(data-zaehler-nach);
}
/* Ausgabe der Anzahl für liste-zaehler */
/* - Klasse 'liste-anzahl' zur Anzeige der Anzahl der Elemente */
div.liste-zaehler span.liste-anzahl::before {
display: inline-block;
content: counter(listZaehler);
}