Is there a way to indent each list-item using CSS?
So a normal list:
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
Displays like so:
One
Two
Three
Four
Here you can use :before
pseudo-element with transparent border.
You can variate indent of list item by changing a width of pseudo-element.
Along with that you can change list marker if set list-style: none;
and set color
of content
removed display: block
and color: transparent
and used space character \00a0
as a content.
li:before {
float: left;
content: "\00a0";
width: 20px;
border: 1px solid transparent;
}
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
The following one is little more complex with changed list marker (removed display: block
as advised by @dippas, but border-top
instead border
didn't work for some reason)
ul {
list-style: none;
counter-reset: cnt;
}
li:before {
float: left;
counter-increment: cnt;
content: counter(cnt)" \25b6";
max-height: 100%;
width: 29px;
border: 1px solid transparent;
margin-top: -.1em;
color: green;
}
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
If you have a lot of list-items
,then the answer given by @Banzay is cleaner, but if you just have few of them, you can use nth-child
for that
li:first-child {
margin-left: 10px
}
li:nth-child(2) {
margin-left: 20px
}
li:nth-child(3) {
margin-left: 30px
}
li:nth-child(4) {
margin-left: 40px
}
/*just demo*/
ul {
margin: 0;
padding: 0;
list-style: none;
}
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With