It’s really easy to have lists into a document, you just have need to add ul
or ol
element and li
child elements.
<ul>
<li>This is the first item</li>
<li>This is the second item</li>
<li>This is the third item</li>
</ul>
<ol>
<li>This is the first item</li>
<li>This is the second item</li>
<li>This is the third item</li>
</ol>
Most browsers will display the <ul>
and <ol>
element with the following default values:
ul {
display: block;
list-style-type: disc;
margin-top: 1em;
margin-bottom: 1 em;
margin-left: 0;
margin-right: 0;
padding-left: 40px;
}
ol {
display: block;
list-style-type: decimal;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
padding-left: 40px;
}
There’s pretty default list CSS options to style them. But, what if you want absolute unordered list bullet icon or don’t what to have full stop on ordered list number or want to remove the left spacing (or proper indenting) of list.
The secret to custom styling lists is here we are opening.
For better structure, recognition or to make more style-able it’s good habit to add a hook (i.e. classes or ID’s) to the elements.
<ul class="post-list">
<li>This is the first item</li>
<li>This is the second item</li>
<li>This is the third item</li>
</ul>
<ol class="post-list">
<li>This is the first item</li>
<li>This is the second item</li>
<li>This is the third item</li>
</ol>
First reset the default lists CSS settings.
/**
* Global list reset
*/
ul, ol {
padding: 0;
list-style: none;
list-style-image: none;
}
Then, we’re styling the lists and resetting the ordered list counter.
/**
* Custom list style
*/
.post-list {
counter-reset: post; /* assume counter reset = post */
margin-bottom: 30px;
}
.post-list > li {
margin-left: 30px;
margin-bottom: 12px;
padding-top: 2px;
}
.post-list > li:before {
position: absolute;
display: inline-block;
box-sizing: border-box;
width: 58px;
margin-left: -58px;
text-align: right;
}
Here we’re styling unordered lists.
/**
* Unordered list
*/
ul.post-list > li:before {
padding-top: 6px;
padding-right: 15px;
font-size: 14.3px;
content: "\2022"; /* unicode for bullet, "•" */
}
Then, after we’re styling ordered lists.
/**
* Ordered list
*/
ol.post-list > li:before {
padding-right: 12px;
counter-increment: post;
content: counter(post) "\002E"; /* unicode for full stop, "." */
}
If you want to normalize the default unstyled and inline list Bootstrap CSS for the above values, then you just have to add following CSS after above values.
/**
* Normalizing unstyled and inline list
*/
.list-unstyled > li,
.list-inline > li {
margin: 0;
padding: 0;
}
.list-unstyled > li:before,
.list-inline > li:before {
content: normal;
}
Then, after put the following default Bootstrap CSS.
/**
* Default unstyled and inline list Bootstrap CSS
*/
.list-unstyled {
padding-left: 0;
list-style: none;
}
.list-inline {
padding-left: 0;
margin-left: -5px;
list-style: none;
}
.list-inline > li {
display: inline-block;
padding-right: 5px;
padding-left: 5px;
}
If you love SCSS like me, then here’s what we do.
//
// Global list reset
//
ul, ol {
padding: 0;
list-style: none;
list-style-image: none;
}
//
// Custom list style
//
.post-list {
counter-reset: post; // let counter = post
margin-bottom: 30px;
> li {
margin-left: 30px;
margin-bottom: 12px;
padding-top: 2px;
}
> li:before {
position: absolute;
display: inline-block;
box-sizing: border-box;
width: 58px;
margin-left: -58px;
text-align: right;
}
}
//
// Unordered list
//
ul.post-list {
> li:before {
padding-top: 6px;
padding-right: 15px;
font-size: 14.3px;
content: "\2022"; // "•"
}
}
//
// Ordered list
//
ol.post-list {
> li:before {
padding-right: 12px;
counter-increment: post;
content: counter(post) "\002E"; // "."
}
}
You should style the elements according to your need.
You might want to look onto the following examples on CodePen styled with SCSS (a CSS preprocessor) and build with Slim (a HTML preprocessor).