it-swarm.com.de

Bestimmen Sie die Länge des Inhalts, um ein dynamisches hr-Tag zu erhalten

Gibt es eine Möglichkeit, die Länge des Inhalts zu bestimmen, der in einem sich ändernden h2-Element enthalten ist? So kann ein hr-Tag auf die gleiche Länge plus eine zusätzliche Breite eingestellt werden?

so würde es irgendwie aussehen

Ich habe versucht, mit einem Pseudocode zu erklären, was ich meine. Ich würde dies natürlich auf eine CSS-Regel verschieben

<h2>SOME RANDOM TITLE LENGTH</h2>
<hr style=width_of_H2_plus_5% />
1
datatoo

Wenn es in Ordnung ist, float oder absolute zu positionieren, können Sie Folgendes versuchen:

<div style="float: left; width:auto;">
   <h2>SOME RANDOM TITLE LENGTH</h2>
   <hr style="width: 110%; margin-left: -5%;"/>
</div>

Leider denke ich nicht, dass width:auto mit static oder relative Positionierung funktioniert.

1
Ewan Heming

Ich glaube nicht, dass es nur mit HTML und CSS möglich ist. Sie können jedoch JavaScript verwenden, um die Breite Ihres _<h2>_ zu berechnen und dann die Breite Ihres _<hr><h2>_ um 5% zu erhöhen. Sie können die Ereignisse _window.onload_ und _window.onresize_ verwenden, um die Breite Ihres _<hr>_ zu aktualisieren, wenn sich die Größe des Fensters ändert.

1
Kevin Mark

Warum nicht einfach den h2-Stil so einstellen, dass er unterstreicht? H2 ist ein Blockelement. Die Stunde sollte unnötig sein.

0
HaL