iantrich / text-divider-row

🗂 Text Divider Row
MIT License
104 stars 13 forks source link

Improvement for better flexibilty #23

Open titiviking opened 2 years ago

titiviking commented 2 years ago

CSS style can be improved to play with :before & :after tags instead of the bottom-border being raised. (also allows the flexibility of spacing with the text)

(original blogpost: https://stackoverflow.com/questions/15557627/heading-with-horizontal-line-on-either-side)

card-mod-row: | .type-custom-text-divider-row: | h2 { position: relative; } h2:before, h2:after { position: absolute; top: 51%; overflow: hidden; width: 50%; height: 1px; content: '\a0'; background-color: red; } h2:before { margin-left: -50%; text-align: right; } h2.text-divider.text-divider-center { border: none; } h2.text-divider span { background: none; }