Positionierung des Inhalts in: nach dem Pseudo-Element absolut relativ zur oberen Kante einer Inline-Elemente
Ich suche nach einer reinen CSS-Methode, um Inhalt in einem :after -Pseudoelement absolut relativ zu einer anderen - möglicherweise mehrzeiligen - Elementoberkante zu positionieren. Das Ergebnis sollte dem ähneln:
In der Regel ist keine Raketenwissenschaft dabei, aber ich würde gerne eine Lösung finden, die auch die folgenden Kriterien erfüllt:
- Benutze nicht das
:beforepseudoelement (dies wird bereits benötigt, um eine andere unabhängige Sache zu erreichen), - Verwenden Sie nicht
display: block/inline-block;auf dem Inline-Element (weil es unschöne Lücken im Textfluss erzeugt), - erlaubt es, die Breite der Elemente als Prozentsatz des enthaltenden Elements zu definieren (zumindest nach Anwendung der Dreierregel),
- die obere Position / den Rand / das Padding des
:after-pseudo-Elements nicht in irgendeiner Weise fest codieren, die es von der Position des Elternelements innerhalb des Großelternelements, der Höhe des Elternelements oder der Höhe des tatsächlichen Elements (oder um es kurz zu machen: mach nichts vom Inhalt abhängig), - fügen Sie keine zusätzlichen HTML-Elemente ein und
- füge JS nicht hinzu.
Ich habe einen Codepen erstellt, der mir hoffentlich hilft zu verstehen, was ich hier mache.
Ich weiß, dass es leicht möglich ist, zu dem Ergebnis zu kommen, indem man eine der oben aufgeführten Einschränkungen verletzt (wie im Codepen gezeigt), aber ich suche nach einer eleganten Lösung für dieses Problem wo das nicht gebraucht wird.
Nachdem ich eine ganze Weile damit herumgespielt habe, würde ich sagen, dass das nicht möglich ist, aber es wäre großartig, wenn mich jemand vom Gegenteil überzeugen könnte - oder zumindest formal beweist, dass es tatsächlich unmöglich ist. Vielen Dank für jede Hilfe im Voraus.
2 Antworten
Nun, die einzig mögliche Lösung mit der gewünschten Methode könnte das sein.
- Erstens, um dies zu erreichen, müssten Sie ::after content direkt in CSS definieren, nicht durch data- attribute. (Ich weiß nicht warum, aber scheint ein Parsing-Problem zu sein.)
- Setze position:relative auf .wrapper . Wenn Sie ::after left-right basierend auf diesem übergeordneten Element verschieben (nicht direktes).
- width: 100% auf ::after setzen (100% der übergeordnete Elemente)
- white-space: pre auf% setzen co_de% - das ist wichtig
- Schreiben die ::after direkt mit content (Escape-Zeichen), um das Wort an bestimmten Stellen zu brechen.
- Setze \A und gib eine negative top: 0 position ( wie weit du willst)
Hinweis: Möglicherweise müssen Sie right für bestimmte Elemente festlegen, wenn der zusätzliche Text aus dem Wrapper überläuft.
Grundsätzlich ist dies die Ergänzung / Änderung für Ihr CSS:
%Vor% Hinweis: Ich weiß nicht, wie gut diese Methode für Responsive Designs ist, habe es nie so versucht.
Getestet in FF und Chrome.
Live Beispiel
BEARBEITEN:
Hm, yeah, ich habe mit word-wrap: break-word angefangen und bin dann versehentlich auf ::after =) gewechselt.
Okay, kleine Änderungen am CSS:
- Anstelle von ::before set width: 100%
- Anstelle von width: auto müssen Sie top: 0 manuell reduzieren (sorry). - Verwenden Sie nicht margin-top: -(number)px , da die oberste Position basierend auf dem Wrapper selbst festgelegt wird.
- Wechseln Sie zwischen top und right: -(number)%
CSS-Änderung:
%Vor% ANDERES EDIT
Sauberere Arbeitslösung, in der Sie right: -(number)px verwenden können (entfernt content: attr(data-meta) und white-space: pre auf gewünschte prozentuale Größe:
Tags und Links css layout css3 css-position pseudo-element