How set ol list numbers in top of text? - html

Question

I have a simple section which contain ordered list elements, I want numbers to be on top of the text instead of default aligned left.
Here is what I would like to have
here is 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>
Here is 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;
}
here is jsfidle : http://jsfiddle.net/bvhxdnau/
What do I need to change in my code to get expected result ??

Answer 1

I have solved you Problem in css.
Please refere below link.
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 2

You can use the following 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;
}

Answer 3

All you need to do is change left and top property of
ol>li::before {
and you will get expected result
set left and top properties as per your requirement.
.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>