3

Не появляется линия но при уменьшении размер окна появляется. линия должна появляться средину ---or--- 

.border-line {
  background: #8e8e8e;
  min-height: 1px ;
  max-height: 1px;
  min-width: 100%;
  margin: 15px 0;
}

.border-or {
  padding: 20px 0;
  position: relative;
}
.border-or .border-line {
  margin: 0;
  background: #000;
}
.border-or span {
  display: block;
  position: absolute;
  top: 3px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  background: #fff;
  font-size: 20px;
  font-weight: 700;
}
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
 <div class="border-or ">
  <div class="border-line">
  </div><span>or</span>
</div>

</body>
</html>
frank
  • 64

1 Answers1

1

div {
  display: flex;
  align-items: center;
}

div::before, div::after {
  content: "";
  border-bottom: 1px solid;
  flex: 1 0 0px;
}


div::before {
  margin-right: .25em;
}


div::after {
  margin-left: .25em;
}
<div>OR</div>
Qwertiy
  • 123,725