nicht angemeldet
Linuchs
Matthias Apsel
Rolf B
JürgenB
Rolf B
Linuchs
Rolf B
Gunnar Bittersmann
Moin
habe vergeblich recherchiert, wie ich den Punkt hinter der laufenden Nummer wegbekomme. Da jedes Objekt einer Liste als „Punkt“ bezeichnet wird, gibt es viele Treffer, die sich aber nicht auf meinen Punkt beziehen.
Auf Seit 1 einer CD-Beilage steht das Inhaltsverzeichnis, die Lieder folgen ab Seite 2. Dass die Aufzählung mit einer beliebigen Zahl beginnen kann, habe ich gefunden:
<ol start=2>
Aber das zuerst genannte Lied ist deshalb nicht das zweite, sondern auf Seite 2. Der Punkt muss weg.
Wie geht das?
Gruß, Linuchs
Hallo Linuchs,
mit counter das Pseudoelement befüllen?
Bis demnächst
Matthias
Hallo Matthias,
Das Selfwiki hier und dort zum Thema.
Gerade bei li Elementen, die mehrzeilig dargestellt werden können, ist an das position:absolute bei der Nummerierung zu denken.
Das ::marker Pseudoelement soll das Formatieren von Listenelementen verbessern. MDN und caniuse sind sich allerdings über die Kompatibilität uneins; MDN sagt: Chrome 80 kennt es. Caniuse sagt: Chrome 83 kennt es noch nicht. Mein Chrome 83 meint, er würde es kennen...
Rolf
Hallo Rolf,
Gerade bei li Elementen, die mehrzeilig dargestellt werden können, ist an das position:absolute bei der Nummerierung zu denken.
und an das verschieben, z.B. mit
position: absolute;
transform: translate(-110%);
Gruß
Jürgen
Hallo Jürgen,
je nachdem, was man will. Man erreicht mit dem Prozent-Transform rechtsbündig ausgerichtete Nummern. Aber perfekt ist das nur, wenn die Nummern einstellig bleiben. Andernfalls wäre etwas wie transform(calc(-100% - 0.5em)) vorzuziehen, damit der Abstand der Nummer zum Text nicht von der Breite der Nummer abhängt (ist minimal, aber vorhanden).
Will man die Nummern linksbündig haben, braucht man display:block, width und festen translate.
Ich hatte ursprünglich statt transform das left Attribut verwendet, aber transform ist besser, weil man bei left auch noch position:relative auf die li legen muss. Thanks for the hint.
Rolf
Hallo Rolf,
danke auch an Matthias für die immer wieder zum Ziel führenden Tipps.
Allerdings kann man den Punkt nicht einfach entfernen, sondern muss die Numerierung neu definieren.
ol {
font-size: 11pt;
list-style-type: none;
counter-reset: seite_nr 1;
}
ol li::before {
display: inline-block;
width: 1.25em;
text-align: right;
margin-right: .75em;
content: counter(seite_nr) "";
counter-increment: seite_nr;
}
ol > li:nth-of-type(odd) {
background: rgba(255,255,255,1);
}
Den inline-block brauche ich, sonst stehen ein- und zweistellige Nummern linksbündig statt rechtsbündig untereinander.
Vorher waren die aufzählenden Nummern nicht Bestandteil von <li>, standen links außerhalb (zu sehen an der Hintergrund-Farbe von <li>). Aber so ist es auch okay:
Linuchs
Hallo Linuchs,
wenn Du Dich an Jürgens Vorschlag (und meiner Ergänzung) orientierst, brauchst Du margin, display:inline-block, width und text-align:right allesamt nicht. Die Kombi von position:absolute; und transform:translate(calc(-100% - 0.5em)) macht den Job.
Effekt: Per Default steht ein absolute-Element dort, wo es auch ohne absolute landen würde. Nur eben aus dem normalen Elementfluss entfernt, so dass der folgende Text es überlagert. Der -100% Anteil des Translate schiebt es um seine eigene Breite nach links, so dass es jetzt links am Text klebt. Nochmal 0.5em dazu, und es gibt einen schönen Abstand.
Rolf
@@Rolf B
Das ::marker Pseudoelement soll das Formatieren von Listenelementen verbessern. MDN und caniuse sind sich allerdings über die Kompatibilität uneins; MDN sagt: Chrome 80 kennt es. Caniuse sagt: Chrome 83 kennt es noch nicht. Mein Chrome 83 meint, er würde es kennen...
Wie äußert sich dieses „Kennen“? Chrome behauptet öfter mal, was zu kennen, was er aber nicht tut.
Jedenfalls wendet er color nicht auf ::marker an. Und content: counter() schon gar nicht.
Firefox tut’s.
☞ Codepen
Anstatt einen eigenen Counter zu verwenden, bietet es sich aber an, den bestehenden zu formatieren: @counter-style
Auch das bislang nur im Firefox implementiert.
☞ Codepen
🖖 Stay hard! Stay hungry! Stay alive! Stay home!