Номера блоков рядом с заголовками

206

06 апреля 2018, 14:55

Задача: провести линию от первого заголовка ко второму, от второго к третьему и т.д. с номером блока

Чтобы было понятно:

Никак не могу придумать как это сделать Заранее большое спасибо

Answer 1

Если воспользоваться автоматической нумерацией которая уже предусмотрена в css и вот описание этого : http://htmlbook.ru/css/counter-reset

вот частичная реализация :

* { 
  margin: 0; 
  padding: 0; 
} 
 
.items { 
  counter-reset: list; 
} 
 
span { 
  position: relative; 
} 
 
span:before { 
  counter-increment: list; 
  content: " " counter(list); 
} 
 
.items { 
  width: 90%; 
  margin: auto; 
} 
 
.parent { 
  border-left: 1px solid #ccc; 
  position: relative; 
  margin: 10px 0; 
  min-height: 300px; 
} 
 
.parent span { 
  display: inline-block; 
  transform: translate(-20px, 0); 
  border-right: 4px solid #222; 
  padding-right: 9px; 
} 
 
.item { 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  justify-content: center; 
  min-height: 300px; 
  text-align: left; 
} 
 
.item h3 { 
  font-size: 2em; 
  font-weight: 900; 
  font-family: Open Sans; 
} 
 
.item p { 
  width: 40%; 
  margin: 30px; 
}

<div class="items"> 
  <div class="parent"> 
    <span class="counter"></span> 
    <div class="item"> 
      <h3>Lorem ipsum dolor sit.</h3> 
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis, commodi. Voluptate facilis nihil ea aliquam?</p> 
    </div> 
  </div> 
  <div class="parent"> 
    <span class="counter"></span> 
    <div class="item"> 
      <h3>Lorem ipsum dolor sit.</h3> 
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis, commodi. Voluptate facilis nihil ea aliquam?</p> 
    </div> 
  </div> 
  <div class="parent"> 
    <span class="counter"></span> 
    <div class="item"> 
      <h3>Lorem ipsum dolor sit.</h3> 
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis, commodi. Voluptate facilis nihil ea aliquam?</p> 
    </div> 
  </div> 
  <div class="parent"> 
    <span class="counter"></span> 
    <div class="item"> 
      <h3>Lorem ipsum dolor sit.</h3> 
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis, commodi. Voluptate facilis nihil ea aliquam?</p> 
    </div> 
  </div> 
</div>

здесь можно посмотреть и добавить или убавить элементы : codepen.io/pen

Answer 2

<div class="wrap">
  <div class="box">
    <h2 class="box__head">Заголовок 1</h2>
  </div>
  <div class="box">
    <h2 class="box__head">Заголовок 2</h2>
  </div>
  <div class="box">
    <h2 class="box__head">Заголовок 3</h2>
  </div>
</div>

.wrap {
  padding: 20px 50px;
}
.box {
  position: relative;
  padding: 0 50px 150px;
  border-left: 1px solid #ccc;
  &:before {
    content: '';
    position: absolute;
    top: 8px;
    left: -3px;
    width: 6px;
    height: 10px;
    background: #f00;
  }
  &:nth-child(1):after {
    content: '1';
    position: absolute;
    top: 5px;
    left: -20px;
  }
  &:nth-child(2):after {
    content: '2';
    position: absolute;
    top: 5px;
    left: -20px;
  }
  &:nth-child(3):after {
    content: '3';
    position: absolute;
    top: 5px;
    left: -20px;
  }
  &__head {
    margin: 0;
  }
}