Adding margin-bottom to list item only when list-item exceeds certain number of words

Question

I am fond of lists. Very fond of lists. Sometimes I have lists with short items like this:

List A

• one
• two
• three

But sometimes I have lists with long blocks of text in them. Like this:

List B

• mauris ultrices eros in cursus turpis massa tincidunt dui ut ornare lectus sit amet est placerat in egestas erat imperdiet sed euismod nisi porta lorem mollis aliquam ut porttitor leo a diam sollicitudin tempor id eu nisl nunc mi ipsum
• massa tempor nec feugiat nisl pretium fusce id velit ut tortor pretium viverra suspendisse potenti nullam ac tortor vitae purus
• aliquet nibh praesent tristique magna sit amet purus gravida quis blandit turpis cursus in hac habitasse platea dictumst quisque sagittis purus sit amet volutpat consequat mauris nunc congue nisi vitae suscipit tellus mauris a diam maecenas sed enim ut sem viverra aliquet eget sit amet
• consequat id porta nibh venenatis cras sed felis eget velit aliquet sagittis id consectetur purus ut faucibus pulvinar elementum integer enim neque volutpat ac tincidunt vitae semper quis lectus nulla

​

For List A, I'd like to keep the items close, like that of a checklist/to-do. However, for List B, I want to add a margin-bottom to the list items. Is this possible with only CSS? Let's say I want to target list-items that exceed 20 words or so, what selector do I use?

Answer 1

There is no such selector but here is an idea to approximate what you want. The trick is to have an invisible element that will create the needed space only when there is a lot of content. Otherwise it will stay at the same line with the content.

ul li div {
   display:inline-block;
   vertical-align:top;
}
ul li:after {
  content:"";
  display:inline-block;
  width:calc(100% - 200px); /* update the 200px like you want*/
  height:20px; /* your margin */
  background:rgba(255,0,0,.2); /* to illustrate*/
}

<ul>
  <li><div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tempus viverra dapibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas</div></li>
  <li><div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tempus viverra dapibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas</div></li>
  <li><div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tempus viverra dapibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas</div></li>
</ul>


<ul>
  <li><div>Lorem ipsum dolor sit amet</div></li>
  <li><div>Lorem</div></li>
  <li><div>Lorem ipsum</div></li>
</ul>

Use a small width to active the space when there is more than a line:

ul li div {
   display:inline-block;
   vertical-align:top;
}
ul li:after {
  content:"";
  display:inline-block;
  width:2px; 
  height:20px; /* your margin */
  background:rgba(255,0,0,.2); /* to illustrate*/
}

<ul>
  <li><div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tempus viverra dapibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas</div></li>
  <li><div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tempus viverra dapibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas</div></li>
  <li><div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tempus viverra dapibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas</div></li>
</ul>

<ul>
  <li><div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tempus viverra dapibus. Pellentesque</div></li>
  <li><div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tempus viverra</div></li>
  <li><div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque temp</div></li>
</ul>


<ul>
  <li><div>Lorem ipsum dolor sit amet</div></li>
  <li><div>Lorem</div></li>
  <li><div>Lorem ipsum</div></li>
</ul>