Divider with text in the middle
CODE
×
HTML
<p class='divider'><span>oder</span></p>
CSS
p.divider { color: var(--black); font-family: 'Roboto'; font-style: normal; font-weight: 300; margin-bottom: 15px; margin-top: -2px; max-width: 800px; font-size: 16px; line-height: 26px; margin-bottom: 35px; } @media screen and (max-width: 767px) { p.divider { font-size: 15px; line-height: 24px; } } .divider { display: flex; align-items: center; width: 100%; } .divider::before, .divider::after { content: ""; flex-grow: 1; height: 1px; background-color: black; } .divider::before { margin-right: 19px; } .divider::after { margin-left: 19px; } .divider span { font-family: 'Roboto', sans-serif; font-size: 16px; font-weight: 500; line-height: 26px; text-align: center; } p { color: var(--black); font-family: 'Roboto'; font-style: normal; font-weight: 300; margin-bottom: 15px; margin-top: -2px; max-width: 800px; font-size: 16px; line-height: 26px; } @media screen and (max-width: 767px) { p { font-size: 15px; line-height: 24px; } }
JS
Divider with text in the middle
barrierefrei
Erstellt: 19.09.2024 - 13:43 Uhr
Letzte Änderung: 19.09.2024 - 14:21 Uhr
×
oder