Подскажите, как можно сверстать данный блок?

Помогите пожалуйста, как сверстать нижнюю часть блока. не пойму как делать эти линии с цифрамивведите сюда описание изображения


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

Автор решения: SLideR11

body {
  background: #273947;
}

.block {
  color: #fff;
  border-bottom: 1px solid;
}

.container {
  max-width: 80%;
  margin: 0 auto;
  display: flex;
  padding-top: 50px;
}

.num {
  width: 25%;
  font-size: 30px;
  margin-bottom: -15px;
  line-height: 1;
}

.num span {
  padding: 0 20px;
  background: #273947;
  position: relative;
}

.num span::after,
.num span::before {
  content: '';
  width: 10px;
  height: 10px;
  background: #fff;
  display: block;
  position: absolute;
  border-radius: 100%;
  top: 50%;
  transform: translateY(-50%);
}

.num span::before {
  left: 0;
}

.num span::after {
  right: 0;
}
<div class="block">
  <div class="container">
    <div class="num"><span>1</span></div>
    <div class="num"><span>2</span></div>
    <div class="num"><span>3</span></div>
    <div class="num"><span>4</span></div>
  </div>
</div>

→ Ссылка