Meine Workarounds des Problems

[MB]

Was ich gemacht habe
Ich habe die "Delimiter"-Kommentare (hier %%) ausgeblendet, die den Kommentar umschließen. Mit Ausname der "Delimiter"-Kommentare…

• …die nichts kommentieren (hier %%%%)
• …wo der Anfangs-"Delimiter"-Kommentar nicht am Ende einer Zeile steht.

…die "Delimiter"-Kommentare, die die Ausnahme-Kriterien erfüllen, sind nicht ausgeblendet.

Ausschnitt:

<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>

.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 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 kriege ich die Größe des Kommentar-Elementes nicht modifiziert, obwohl dies mein Ziel ist.
• Mit display: inline-block 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 verwendet, um zumindest die Größe des Elementes im Textfluss zu ändern. Mit overflow: hidden, white-space: nowrap, width:0 und height:0 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 und content:"*" das Kommentar-Element so zu gestalten, dass nur das Sternchen (*) angezeigt wird.

Analyse des Workarounds
(Wie schon mit dem display: none Problem) Diese Konfiguration verhindert, das alle Child-Elemente des Kommentar-Elementes nicht angezeigt werden können, auch das ::before-Element.

Mein Workaround-Workaround der Probleme
…Darum habe ich mit width:0.5em und height:1em 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 oder :active).

.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.