Style Ordered List Numbering In A Post WordPress

Francisco Javier Carazo Gil answers:

Which numbers exactly? In which site? We need to have a CSS available.

---

---

Arnav Joy answers:

please explain what you want to have clearly

Abdelhadi Touil answers:

Hi.
Your question isn't clear, but I think you want to style your ordered list bu making number bigger and so on. These are very helpful tutorials about styling ordered list hope they help:

[[LINK href="http://www.red-team-design.com/css3-ordered-list-styles"]]http://www.red-team-design.com/css3-ordered-list-styles[[/LINK]]

[[LINK href="http://css-tricks.com/numbering-in-style/"]]http://css-tricks.com/numbering-in-style/[[/LINK]]

[[LINK href="http://world.episerver.com/Blogs/Eric-Pettersson/Dates/2012/4/Styling-ordered-lists-in-the-xhtml-editor-using-only-CSS/"]]http://world.episerver.com/Blogs/Eric-Pettersson/Dates/2012/4/Styling-ordered-lists-in-the-xhtml-editor-using-only-CSS/[[/LINK]]

Good luck.

---

Hariprasad Vijayan answers:

Need bit more description.

---

MDan answers:

Hello,

You can use the following numbering style:

<strong>Example 1</strong>
<strong>The HTML</strong>
<div>
<ol>
<li><span>1.</span><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur. Fusce nec leo ut massa viverra venenatis. Nam accumsan libero a elit aliquet quis ullamcorper arcu tincidunt. Praesent purus turpis, consectetur quis congue vel, pulvinar at lorem. Vivamus varius condimentum dolor, quis ultricies ipsum porta quis. </p></li>
<li><span>2.</span><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur. </p></li>
<li><span>3.</span><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur. </p></li>
</ol>
</div>

<strong>The CSS</strong>

div {
width: 500px;
margin: 10px
}

ol {
color: #ccc;
list-style-type: none;
}

ol li {
position: relative;
font: bold italic 45px/1.5 Helvetica, Verdana, sans-serif;
margin-bottom: 20px;
}

li p {
font: 12px/1.5 Helvetica, sans-serif;
padding-left: 60px;
color: #555;
}

span {
position: absolute;
}

You can see a live demo here: http://codepen.io/secondfret/pen/oexuc

<strong>Example 2</strong>
The HTML:
<ol class="rectangle-list">
<li><a href="">List item</a></li>
<li><a href="">List item</a></li>
<li><a href="">List item</a>
<ol>
<li><a href="">List sub item</a></li>
<li><a href="">List sub item</a></li>

<li><a href="">List sub item</a></li>
</ol>
</li>
<li><a href="">List item</a></li>
<li><a href="">List item</a></li>
</ol>

<strong>The CSS</strong>
.rectangle-list a{
position: relative;
display: block;
padding: .4em .4em .4em .8em;
*padding: .4em;
margin: .5em 0 .5em 2.5em;
background: #ddd;
color: #444;
text-decoration: none;
transition: all .3s ease-out;
}

.rectangle-list a:hover{
background: #eee;
}

.rectangle-list a:before{
content: counter(li);
counter-increment: li;
position: absolute;
left: -2.5em;
top: 50%;
margin-top: -1em;
background: #fa8072;
height: 2em;
width: 2em;
line-height: 2em;
text-align: center;
font-weight: bold;
}

.rectangle-list a:after{
position: absolute;
content: '';
border: .5em solid transparent;
left: -1em;
top: 50%;
margin-top: -.5em;
transition: all .3s ease-out;
}

.rectangle-list a:hover:after{
left: -.5em;
border-left-color: #fa8072;
}

---

Giri answers:

.entry-content ol {
display: block;
padding: 0 0 0 26px;
list-style: none;
overflow: hidden;
counter-reset: numList;
}
.entry-content ol li {
margin-right: 44px;
float: left;
position: relative;
margin-left: 20px;
list-style-type: none;
}
.entry-content ol li:before {
counter-increment: numList;
content: counter(numList);
float: left;
position: absolute;
left: -26px;
top:18px;
font: bold 12px sans-serif;
text-align: center;
color: #fff;
line-height: 18px;
width: 18px; height: 18px;
background: #d24d33;
}


Here is the [[LINK href="http://jsfiddle.net/Viruthagiri/Pe7Na/"]]demo[[/LINK]]