Positionierung des Inhalts im :after-Pseudoelement absolut relativ zur Oberkante eines Inline-Elements ⇐ CSS

[Guest]

Ich suche nach einer reinen CSS-Methode, um Inhalte in einem :after-Pseudoelement absolut relativ zur Oberkante eines anderen – möglicherweise mehrzeiligen – Elements zu positionieren. Das Ergebnis sollte etwa so aussehen:




Normalerweise ist dafür kein Hexenwerk nötig, aber ich würde gerne eine Lösung finden, die auch die folgenden Kriterien erfüllt:

• Verwenden Sie das nicht :before Pseudoelement (dies ist bereits erforderlich, um eine andere unabhängige Sache zu erreichen),
• verwenden Sie display: block/inline-block; nicht für das Inline-Element (weil dadurch hässliche Löcher im Textfluss entstehen),
• erlauben, die Breite der Elemente als Prozentsatz des enthaltenden Elements zu definieren (zumindest nach Anwendung der Dreierregel),< /li>
  Oben nicht fest codieren Position/Rand/Padding des :after-Pseudo-Elements in einer Weise, die es von der Position des übergeordneten Elements innerhalb des übergeordneten Elements, der Höhe des übergeordneten Elements oder der Höhe des tatsächlichen Elements abhängig macht (oder um es kurz zu machen: Machen Sie nichts vom Inhalt abhängig),
• fügen Sie keine zusätzlichen HTML-Elemente ein und
• fügen Sie kein JS hinzu.

Ich habe einen Codepen erstellt, der es hoffentlich leichter macht, zu verstehen, was ich hier vorhabe.

Ich weiß, dass es leicht möglich ist, dorthin zu gelangen Ergebnis durch Verstoß gegen eine der oben aufgeführten Einschränkungen (wie im Codepen gezeigt), aber ich suche nach einer eleganten Lösung für dieses Problem, bei der dies nicht erforderlich ist.

Nachdem ich eine ganze Weile damit herumgespielt habe, würde ich es sagen ist nicht möglich, aber es wäre großartig, wenn mich jemand vom Gegenteil überzeugen könnte – oder zumindest formal beweisen könnte, dass es tatsächlich unmöglich ist. Vielen Dank für jede Hilfe im Voraus.