Как установить список номеров в верхней части текста?

Question

У меня есть простой раздел, который содержит упорядоченные элементы списка, я хочу, чтобы числа были поверх текста вместо выровненных по умолчанию по левому краю.

Вот то, что я хотел бы иметь

здесь html

<section class="info-section">
  <div class="main-info">
    <h2>Nature from air</h2>
    <p>Mauris consequat libero metus, nec ultricies sem efficitur quis. Integer bibendum eget metus ac accumsan. Integer sit amet lacus egestas, semper est quis, viverra ex.</p>
    <ol class="info-list">
      <li>CPellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. Nunc vel nibh tempor, pharetra lectus congue, luctus orci.</li>
      <li>CPellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. Nunc vel nibh tempor, pharetra lectus congue, luctus orci.</li>
      <li>CPellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. Nunc vel nibh tempor, pharetra lectus congue, luctus orci.</li>
      <li>CPellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. Nunc vel nibh tempor, pharetra lectus congue, luctus orci.</li>
      <li>CPellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. Nunc vel nibh tempor, pharetra lectus congue, luctus orci.</li>
    </ol>
  </div>
</section>

Здесь css:

.main-info {
  background-image: url("https://preview.ibb.co/hZw69K/drone.png");
  background-position: right center;
  background-repeat: no-repeat;
}

ol {
  column-count: 2;
  counter-reset: li;
}

ol>li {
  position: relative;
  list-style: none;
  display: inline-block;
  vertical-align: top;
  margin: 21px 0 57px 2em;
  padding: 22px 41px;
}

ol>li::before {
  content: counter(li);
  counter-increment: li;
  position: absolute;
  top: -2px;
  left: -2em;
  box-sizing: border-box;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  margin-right: 8px;
  padding: 17px;
  border: 1px solid rgb(63, 78, 118);
  background: #fff;
  font-weight: bold;
  font-family: proximaNova;
  text-align: center;
}

здесь jsfidle: http://jsfiddle.net/bvhxdnau/

Что мне нужно изменить в моем коде, чтобы получить ожидаемый результат ??

Answer 1

Все, что вам нужно сделать, это изменить свойство left и top на

ol> li :: before {

, и вы получите ожидаемый результат

установите свойства left и top согласно вашему требованию.

.main-info {
  background-image: url("https://preview.ibb.co/hZw69K/drone.png");
  background-position: right center;
  background-repeat: no-repeat;
}

ol {
  column-count: 2;
  counter-reset: li;
}

ol>li {
  position: relative;
  list-style: none;
  display: inline-block;
  vertical-align: top;
  margin: 21px 0 57px 2em;
  padding: 22px 41px;
}

ol>li::before {
  content: counter(li);
  counter-increment: li;
  position: absolute;
  top: -30px;
  left: 25%;
  box-sizing: border-box;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  margin-right: 8px;
  padding: 17px;
  border: 1px solid rgb(63, 78, 118);
  background: #fff;
  font-weight: bold;
  font-family: proximaNova;
  text-align: center;
}

<section class="info-section">
  <div class="main-info">
    <h2>Nature from air</h2>
    <p>Mauris consequat libero metus, nec ultricies sem efficitur quis. Integer bibendum eget metus ac accumsan. Integer sit amet lacus egestas, semper est quis, viverra ex.</p>
    <ol class="info-list">
      <li>CPellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. Nunc vel nibh tempor, pharetra lectus congue, luctus orci.</li>
      <li>CPellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. Nunc vel nibh tempor, pharetra lectus congue, luctus orci.</li>
      <li>CPellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. Nunc vel nibh tempor, pharetra lectus congue, luctus orci.</li>
      <li>CPellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. Nunc vel nibh tempor, pharetra lectus congue, luctus orci.</li>
      <li>CPellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. Nunc vel nibh tempor, pharetra lectus congue, luctus orci.</li>
    </ol>
  </div>
</section>

Answer 2

Я решил вашу проблему в css. Пожалуйста, обратитесь по ссылке ниже. http://jsfiddle.net/bvhxdnau/2/

.main-info {
  background-image: url("https://preview.ibb.co/hZw69K/drone.png");
  background-position: right center;
  background-repeat: no-repeat;
}

ol {
  column-count: 2;
  counter-reset: li;
}

ol>li {
  position: relative;
  list-style: none;
  display: inline-block;
  vertical-align: top;
  margin: 60px 0 57px 2em;
  padding: 22px 41px;
}

ol>li::before {
  content: counter(li);
  counter-increment: li;
  position: absolute;
  top: -54px;;
  left: 50%;
  box-sizing: border-box;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  margin-right: 8px;
  padding: 17px;
  border: 1px solid rgb(63, 78, 118);
  background: #fff;
  font-weight: bold;
  font-family: proximaNova;
  text-align: center;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
}

Answer 3

Вы можете использовать следующий CSS:

ol>li::before {
    content: counter(li);
    counter-increment: li;
    position: absolute;
    top: -3em;
    left: 50%;
    box-sizing: border-box;
    width: 54px;
    border-radius: 50%;
    margin-left: -27px; //middle of the width
    padding: 17px;
    border: 1px solid rgb(63, 78, 118);
    background: #fff;
    font-weight: bold;
    font-family: proximaNova;
    text-align: center;
}