Реализация стиля псевдоэлементом

Question

Как реализовать такой стиль текст псевдоелементом "or"

Answer 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>

БЛОГ НА HUSL

Реализация стиля псевдоэлементом

Ответы (1 шт):