How to beautify the appearance of the Numbered List of Blog Posts

Beautify the Display of Numbered List Blog Posts

IN blog posts sometimes we make a numbered list, namely a list of sentences/words that are numbered.

An example is the illustration image in this post.

We have been familiar with the term “Bulleted & Numbering” in MS Word for a long time. It’s on the blog too. The terms are the same: Bulleted List aka a numbered list.

Displaying Numbered Lists like this is highly recommended so that our writing on the blog is more “user friendly” (user friendly).

How to Beautify the Display of a Numbered List of Blog Posts

How to make it very easy:

1. Templates > Edit HTML
2. Copy the following code above the code ]] or

ol {counter-reset:li;list-style: none;font:15px 'Montserrat', Sans-Serif;
padding:0;margin-bottom:2em;text-shadow: 0 1px 0 rgba(255,255,255,.5);}
ol ol { margin: 0 0 0 2em;}
.post ol li{position:relative;display:block;padding:.4em .4em .4em .8em;
margin:.5em 0 .5em 2.5em;background:#fafafa;color:#666;text-decoration:none;
transition:all .3s ease-out;}
.post ol li:hover{background:#f9f9f9;}
.post ol li:before{content:counter(li);counter-increment:li;position:absolute;
left:-2.5em;top:50%;margin-top:-1em;background:#48d;color:#FEFEFE;height:2em;width:2em;
line-height:2em;text-align:center;font-weight:bold;}
.post ol li:after{position:absolute; content:'';border: .5em solid transparent;
left:-1em;top:50%;margin-top:-.5em;transition:all .3s ease-out;}
.post ol li:hover:after{left:-.5em;border-left-color:#e74c3c;}
.post ol li span{position:relative;display:block;padding:5px 8px;margin-bottom:10px;background:#fafafa;color:#666;text-decoration:none;transition:all .3s ease-out; }
.post ol li span:hover{background:#f9f9f9;}

3. Save templates!

OTHER CODES / OTHER COLORS:

Beautify the Display of Numbered List Blog Posts

If you want something like the picture above, then the code is:

ol {counter-reset:li;list-style: none;font:15px ‘Roboto Condensed’, ‘Oswald’;
padding:0;margin-bottom:4em;text-shadow: 0 1px 0 rgba(255,255,255,.5);}
ol ol { margin: 0 0 0 2em;}
.post ol li{position:relative;display:block;padding:.4em .4em .4em .8em;
margin:.5em 0 .5em 2.5em;background:#F5F5F5;color:#666;text-decoration:none;
transition:all .3s ease-out;}
.post ol li:hover{background:#EEEEEE;}
.post ol li:before{content:counter(li);counter-increment:li;position:absolute;
left:-2.5em;top:50%;margin-top:-1em;background:#FA8072;color:#FEFEFE;height:2em;width:2em;
line-height:2em;text-align:center;font-weight:bold;}
.post ol li:after{position:absolute; content:”;border: .5em solid transparent;
left:-1em;top:50%;margin-top:-.5em;transition:all .3s ease-out;}
.post ol li:hover:after{left:-.5em;border-left-color:#FA8072;}
.post ol li span{position:relative;display:block;padding:5px 8px;margin-bottom:10px;background:#fafafa;color:#666;text-decoration:none;transition:all .3s ease-out; }
.post ol li span:hover{background:#f9f9f9;}

Thus Beautify Display Numbered List Blog Posts.

Source

.