Wie kann ein Etikett in das vorhergehende erweiterte Element eingeschlossen werden, ohne einen Wrapper-Container zu verw ⇐ HTML

[Anonymous]

Angegeben ist ein kleines farbiges Kästchen, gefolgt von einem Label-Namensschild. Etwa so:


Sobald Sie mit der Maus über das kleine farbige Kästchen fahren, sollte sich das Kästchen auf seine volle Breite erweitern und der Beschriftungstext sollte innerhalb des jetzt erweiterten Rechtecks positioniert und unten rechts ausgerichtet werden.

So:


Ich weiß, wie ich dies erreichen kann, indem ich zusätzliche Containerelemente um den aktuellen HTML-Code wickele, wie dieses Demo-Snippet. Meine Frage hier ist: Ist es möglich, mein gewünschtes Ergebnis zu erzielen, ohne eine zusätzliche Behälterverpackung zu verwenden? Mein aktueller, reiner HTML-Code und CSS sind:

Code: Select all

.box{width: 25px; height: 22px; margin-bottom: -4px;}
.box:hover {width: 100%; height: 100px; float: left;}
rect {width:100%; height:100%;}
svg + strong {position: absolute; margin: 0 0 0 5px;}

Code: Select all

[b]YELLOW[/b]
Paragraph paragraph paragraph

[b]OLIVE[/b]
Paragraph paragraph paragraph