CODEWITHSUNDEEP
css
pickos7
pickos7

Reputation: 13

Add spacing between the <li> text and the before content

I want to achieve something like this:

000 Lorem ipsum 
    dolor

0   Lorem ipsum 
    dolor

This is the code I'm working with:

<ul>
  <li>Lorem ipsum dolor sit amet, sed do eiusmo</li>
  <li>Lorem ipsum dolor sit amet elit</li>
</ul>

CSS:

li:before {
  content: "0";
}
li:first-child:before {
  content: "000";
}
ul {
  width:100px;
  list-style: none;
}

Can you help me with CSS to have the text stay equally away from the before content?

"Lorem" and "dolor" need to stay in the same "vertical line".

https://jsfiddle.net/ga6r8qsz/

Thank you.

Upvotes: 0

Views: 1387

Answers (4)

Temani Afif
Temani Afif

Reputation: 273944

Here is an idea where you don't need to use any fixed value for width. Consider a table layout and it will work with any pseudo element content:

li:before {
  content: "0";
  display:table-cell;
  padding-right:5px;
}
li:first-child:before {
  content: "000";
}
ul {
  width:200px;
  list-style: none;
  display:table;
}
li {
  display:table-row;
}
<ul>
  <li>Lorem ipsum dolor sit amet, sed do eiusmo</li>
  <li>Lorem ipsum dolor sit amet elit</li>
</ul>

Upvotes: 0

disinfor
disinfor

Reputation: 11558

You can do this using absolute positioning on the before elements. This will ensure that your li items will remain vertically in line.

li {
  position: relative;
  padding-left: 15px;
  margin-bottom: 15px;
}

li::before {
  content: "0";
  position: absolute;
  width: 35px;
  left: -35px;
}

li:first-child::before {
  content: "0000";
}

ul {
  width: 100px;
  list-style: none;
}
<ul>
  <li>Lorem ipsum dolor sit amet, sed do eiusmo</li>
  <li>Lorem ipsum dolor sit amet elit</li>
</ul>

Upvotes: 1

Saksham
Saksham

Reputation: 9390

Using the display: flex property on li elements will not only give equal spacing between the :before pseudo elements and the li tags, but will also make the li tags left aligned on new lines as shown below.

li {
  display: flex;
}
li:before {
  content: "0";
  width:70px;
}
li:first-child:before {
  content: "000";
}
ul {
  width:150px;
  list-style: none;
}
<ul>
  <li>Lorem ipsum dolor sit amet, sed do eiusmo</li>
  <li>Lorem ipsum dolor sit amet, sed do eiusmo</li>
</ul>

Upvotes: 1

Black Hole
Black Hole

Reputation: 1382

make the pseudoelements ::befores like blocks, in that way you can add the width of them and control the view of the list in that way

here example:

li:before {
  content: "0";
  display:inline-block;
  width:35px;
}
li:first-child:before {
  content: "000";
  display:inline-block;
  width:35px;
}

ul {
  width:300px;
  list-style: none;
}
<ul>
  <li>some text</li>
  <li>some text more</li>
</ul>

Upvotes: 1

Related Questions