**Was ich gemacht habe** Ich habe die "Delimiter"-Kommentare _(hier_ `%%`{:.language-markdown}_)_ ausgeblendet, die den Kommentar umschließen. Mit Ausname der "Delimiter"-Kommentare… - …die nichts kommentieren _(hier_ `%%%%`{:.language-markdown}_)_ - …wo der Anfangs-"Delimiter"-Kommentar nicht am Ende einer Zeile steht. …die "Delimiter"-Kommentare, die die Ausnahme-Kriterien erfüllen, sind nicht ausgeblendet. _Ausschnitt:_ ```html <div class=“line“> qux <span class="comment comment-start">%%</span> <span class="comment">foo</span> <span class="comment comment-end">%%</span> bar <span class="comment comment-start">%%</span> </div> <div class="line"> tok <span class="comment comment-end">%%</span> </div> ``` ```css .comment-start:has( + .comment:not( .comment-end ), .comment:not( * ) ), .comment-end:not( .comment-start + .comment-end ) { display: none } .comment:not( .comment-start, .comment-end ) { /* … */ } ``` _Resultat:_ quxbar **Welche Probleme auftraten** Ich schaffe es nicht mit meinem dürftigen CSS Wissen und meinen Recherchen, ein Inline Text Abschnitt horizontal einklappen zu können und nur über ein Event dieses Inline Textes wieder auszuklappen. - Mit `display: none`{:.language-css} blende ich zwar das komplette Kommentar-Element aus, jedoch gibt es keine Möglichkeit, überhaupt per GUI mit diesem Element zu interagieren, weil es ja ausgeblendet ist. - Mit `display: inline`{:.language-css} kriege ich die Größe des Kommentar-Elementes nicht modifiziert, obwohl dies mein Ziel ist. - Mit `display: inline-block`{:.language-css} kann ich zwar die Größe des Kommentar-Elementes festlegen, jedoch passt das modifizierte Element nicht mehr in den Textfluss der anderen inline-Elemente, da es ja ein inline-block Element ist - so schätze ich Aufgrund meiner Versuche. **Mein Workaround der Probleme** Ich habe `display: inline-block`{:.language-css} verwendet, um zumindest die Größe des Elementes im Textfluss zu ändern. Mit `overflow: hidden`{:.language-css}, `white-space: nowrap`{:.language-css}, `width:0`{:.language-css} und `height:0`{:.language-css} habe ich den Text ausgeblendet, der technisch gesehen innerhalb des Kommentar-Elementes liegt, aber visuell außerhalb des anzeigbaren Rahmens. _(Schon mal gut)_. Ich habe versucht mit `&::before`{:.language-css} und `content:"*"`{:.language-css} das Kommentar-Element so zu gestalten, dass nur das Sternchen _(_`*`_)_ angezeigt wird. **Analyse des Workarounds** _(Wie schon mit dem_ `display: none`{:.language-css} _Problem)_ Diese Konfiguration verhindert, das alle Child-Elemente des Kommentar-Elementes nicht angezeigt werden können, auch das `::before`{:.language-css}-Element. **Mein Workaround-Workaround der Probleme** …Darum habe ich mit `width:0.5em`{:.language-css} und `height:1em`{:.language-css} einen kleinen Ausschnitt des Elementes im Textfluss so gestaltet, dass wieder ein Stückchen Kommentar-Element angezeigt werden kann. So ist wieder ein CSS Event des Kommentar-Elementes möglich _(z.B._ `:hover`{:.language-css} _oder_ `:active`{:.language-css}_)_. ```css .comment:not( .comment-start, .comment-end ) { /* … */ } display:inline-block; position: relative; width: 0.5em; height:1em; overflow: hidden; white-space: nowrap; &:active { width: inherit !important; height:inherit !important; overflow: visible !important; white-space: normal !important; } &::before { display:inline-block; position: relative; content: "*"; } } ``` **Analyse des Workaround-Workaround** Das ist meine laihenhafte und dürftige Lösung 😕. **Auf meine Lösung bezogene Frage** Ist dies die einzige Lösung meines Problems? Und wenn ja, wie bekomme ich dieses Inline-Block-Kommentar-Element so justiert und eingegliedert, dass es sich wieder wie ein Inline-Element verhält und die Dimensionen eines `*`-Zeichens annimmt.