Hallo Qnix,

schönen Gruß ans Kontinuum, sowie an Jean-Luc und Kathy!

<ul>
<header>Ich packe inh meinen Koffer</header>
<li>einen Hund</li>
<li>eine Katze</li>
<li>einen Föhn</li>
<li>ein …</li>
<li>…!</li>
</ul>

ist falsch, <header> als Kind von <ul> ist unzulässig. Eine Listen-Überschrift muss außerhalb der Liste stehen. Einfach als <p>, oder als passendes <h…> Element. <ul> darf enthalten:

• <li> Elemente
• <script> Elemente
• <template> Elemente

Erstaunlich, dass der Browser vor dem header nicht gleich erstmal das ul zumacht. Was wo enthalten sein darf, sagen Dir die Referenzseiten zu den Elementen im Selfwiki, oder Mozilla, oder die HTML Spezifikation. Die w3schools verraten Dir sowas allerdings nicht.

Aber das sollte Dir die List-Items nicht verhageln.

Einen Teil(!) dieser Effekte kann man gerade noch vermeiden, wenn man Whitespace(!) zwischen den Grenzen der Entities (also zwischen einem „>“ und dem folgenden „<“) weg nimmt.

Dass ::before-Inhalt, li-Inhalt und ::after-Inhalt umgebrochen werden, liegt daran, dass der Inhalt des li als Fließtext aufgefasst wird. Deshalb bleibt auch der Whitespace als eine Leerstelle erhalten. Hier kann es helfen, das li-Element mit display:inline-flex zu formatieren (was aber auch gleich das Listenverhalten entfernt) und flex-flow: row wrap; zu setzen. li Elemente haben ab Werk ein display:list-item, wenn dessen Entfernung stört, musst Du den li-Inhalt in ein span oder div packen und dem die passenden Styles geben. Muss aber alles nicht klappen, es hängt sehr davon ab, was Du da tust.

Tauschen von Whitespace gegen Kommentare ist eine weitere Möglichkeit, das kann man aber auch so machen. Schön ist allerdings anders:

<span>Hallo</span
><span>Welt</span>

(Kann ich jetzt nicht mit ~~~ formatieren weil der HTML-Formatter vom Forum darüber austickt)

Um Dir wirklich eine Lösung empfehlen zu können, müssten wir wissen, was genau Du erreichen willst.

Rolf