1 ответ
Можно так
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.or {
display: flex;
align-items: center;
}
.or span {
padding: 0 10px;
}
.or::before,
.or::after {
content: '';
position: static;
display: block;
width: 100%;
height: 1px;
background-color: red;
}
<div class="or">
<span>or</span>
</div>
C анимацией появления:
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.or {
display: flex;
align-items: center;
}
.or span {
padding: 0 10px;
}
.or::before,
.or::after {
content: '';
position: static;
display: block;
width: 100%;
height: 1px;
background-color: red;
animation: showOr 1s ease-in-out backwards;
}
.or::before {
transform-origin: right top;
}
.or::after {
transform-origin: left top;
}
@keyframes showOr {
0% {
transform: scaleX(0);
}
100% {
transform: scaleX(1);
}
}
<div class="or">
<span>or</span>
</div>