Create foundation grid within list elements

Question

I'm trying to create an ordered list, where each li of that list contains part of a Foundation 5.5.3 grid.

The problem I'm running into, is my li elements are inserting some space at the top before its child grid columns.

Example:

After some investigation, I figured out this is due to a Foundation CSS rule that places content: " "; display: table; on the ::before psuedo-element of my row.

However, overriding that / removing it messes up the spacing on the row itself.

I've tried taking the row class off the li itself and inserting a child div.row but I still see the same issue.

To reiterate, I'd like to create a 2 column grid within an each li of an ol/ul list, but doing that adds some vertical space at the top of each li. How can I get rid of this space, or, is there another approach I should take to acheive this 2 column grid within several lis.

Thanks.

---

Example:

li {
  background-color: #ddd;
  padding: 5px;
}

li + li {
  margin-top: 5px !important;
}

li > span {
  background-color: yellow;
}

/* Trying to override ::before and ::after on .row */
.row.psuedo-override::before, .row.psuedo-override::after {
  content: none !important;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.3/css/foundation.css" rel="stylesheet"/>
<div class="row">
  <div class="small-12 columns">
    <h1>My List</h1>
    <h5><kbd>li</kbd> tags are <kbd>"row collapse"</kbd></h5>
    <ol>
      <li class="row collapse">
        <span class="small-9 columns">Some long text goes here that should wrap to the next line if it is sufficiently long enough which this should qualify</span>
        <span class="small-3 columns text-right">$100</span>
      </li>
      <li class="row collapse">
        <span class="small-9 columns">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nulla mauris, iaculis vel ante eget, vestibulum ornare est. </span>
        <span class="small-3 columns text-right">$50</span>
      </li>
      <li class="row collapse">
        <span class="small-9 columns">Phasellus quis odio ac sapien congue aliquam sit amet ornare magna. Quisque consequat mauris nec turpis finibus, id bibendum dolor tincidunt.</span>
        <span class="small-3 columns text-right">$75</span>
      </li>
    </ol>
  </div>
</div>

<hr>

<div class="row">
  <div class="small-12 columns">
    <h1>My List</h1>
    <h5><kbd>li</kbd> tags are <kbd>"row collapse"</kbd>, with no psuedo content. Vertical height gets messed up though...</h5>
    <ol>
      <li class="row collapse psuedo-override">
        <span class="small-9 columns">Some long text goes here that should wrap to the next line if it is sufficiently long enough which this should qualify</span>
        <span class="small-3 columns text-right">$100</span>
      </li>
      <li class="row collapse psuedo-override">
        <span class="small-9 columns">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nulla mauris, iaculis vel ante eget, vestibulum ornare est. </span>
        <span class="small-3 columns text-right">$50</span>
      </li>
      <li class="row collapse psuedo-override">
        <span class="small-9 columns">Phasellus quis odio ac sapien congue aliquam sit amet ornare magna. Quisque consequat mauris nec turpis finibus, id bibendum dolor tincidunt.</span>
        <span class="small-3 columns text-right">$75</span>
      </li>
    </ol>
  </div>
</div>

Answer 1

The negative margin approach

As a simple workaround to avoid the space, you can just set a negative top margin to your content <span> tags as high as your line-height (because this is the height your pseudo-element produces with content: " ";:

li > span {
  margin-top: -1.6rem;
}

Trade-off: This only works if your line-height isn't changing (e.g. because of responsiveness, in this case you will have to adjust this value according to your media query).

li {
  background-color: #ddd;
  padding: 5px;
}
li + li {
  margin-top: 5px !important;
}
li > span {
  background-color: yellow;
  margin-top: -1.6rem;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.3/css/foundation.css" rel="stylesheet" />
<div class="row">
  <div class="small-12 columns">
    <h1>My List</h1>
    <h5><kbd>li</kbd> tags are <kbd>"row collapse"</kbd></h5>
    <ol>
      <li class="row collapse">
        <span class="small-9 columns">Some long text goes here that should wrap to the next line if it is sufficiently long enough which this should qualify</span>
        <span class="small-3 columns text-right">$100</span>
      </li>
      <li class="row collapse">
        <span class="small-9 columns">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nulla mauris, iaculis vel ante eget, vestibulum ornare est. </span>
        <span class="small-3 columns text-right">$50</span>
      </li>
      <li class="row collapse">
        <span class="small-9 columns">Phasellus quis odio ac sapien congue aliquam sit amet ornare magna. Quisque consequat mauris nec turpis finibus, id bibendum dolor tincidunt.</span>
        <span class="small-3 columns text-right">$75</span>
      </li>
    </ol>
  </div>
</div>

The clearing-the-float approach

Another way would be to remove the pseudo elements like you did with content: none !important;. Now the problem is that there is only floating content left in the <li> tag. Therefore you have to insert an element at the end of each <li> tags content, that has a clear: both; rule applied, e.g. a <br>.

<br class="clear" />

.clear {
  clear: both;
}

Trade-off: You have to change your markup and your enumeration disappears.

li {
  background-color: #ddd;
  padding: 5px;
}
li + li {
  margin-top: 5px !important;
}
li > span {
  background-color: yellow;
  display: inline-block;
}
.row::before, .row::after {
    content: none !important;
}
.clear {
  clear: both;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.3/css/foundation.css" rel="stylesheet" />
<div class="row">
  <div class="small-12 columns">
    <h1>My List</h1>
    <h5><kbd>li</kbd> tags are <kbd>"row collapse"</kbd></h5>
    <ol>
      <li class="row">
        <span class="small-9 columns">Some long text goes here that should wrap to the next line if it is sufficiently long enough which this should qualify</span>
        <span class="small-3 columns text-right">$100</span>
        <br class="clear" />
      </li>
      <li class="row">
        <span class="small-9 columns">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nulla mauris, iaculis vel ante eget, vestibulum ornare est. </span>
        <span class="small-3 columns text-right">$50</span>
        <br class="clear" />
      </li>
      <li class="row">
        <span class="small-9 columns">Phasellus quis odio ac sapien congue aliquam sit amet ornare magna. Quisque consequat mauris nec turpis finibus, id bibendum dolor tincidunt.</span>
        <span class="small-3 columns text-right">$75</span>
        <br class="clear" />
      </li>
    </ol>
  </div>
</div>

Answer 2

This is a pretty weird bug. Without changing anything in your HTML, this is the best solution I could come up with:

li {
  background-color: #ddd;
  padding: 5px;
}

li + li {
  margin-top: 5px !important;
}

li > span {
  background-color: yellow;
}
.row.collapse:before {
  display: block !important;
  height: .02px;
}

.row.collapse {
  padding: 0; /* Did you want padding? */
  width: 100%;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.3/css/foundation.css" rel="stylesheet"/>
<div class="row">
  <div class="small-12 columns">
    <h1>My List</h1>
    <h5><kbd>li</kbd> tags are <kbd>"row collapse"</kbd></h5>
    <ol>
      <li class="row collapse">
        <span class="small-9 columns">Some long text goes here that should wrap to the next line if it is sufficiently long enough which this should qualify</span>
        <span class="small-3 columns text-right">$100</span>
      </li>
      <li class="row collapse">
        <span class="small-9 columns">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nulla mauris, iaculis vel ante eget, vestibulum ornare est. </span>
        <span class="small-3 columns text-right">$50</span>
      </li>
      <li class="row collapse">
        <span class="small-9 columns">Phasellus quis odio ac sapien congue aliquam sit amet ornare magna. Quisque consequat mauris nec turpis finibus, id bibendum dolor tincidunt.</span>
        <span class="small-3 columns text-right">$75</span>
      </li>
    </ol>
  </div>
</div>

<hr>

<div class="row">
  <div class="small-12 columns">
    <h1>My List</h1>
    <h5><kbd>li</kbd> tags are <kbd>"row collapse"</kbd>, with no psuedo content. Vertical height gets messed up though...</h5>
    <ol>
      <li class="row collapse psuedo-override">
        <span class="small-9 columns">Some long text goes here that should wrap to the next line if it is sufficiently long enough which this should qualify</span>
        <span class="small-3 columns text-right">$100</span>
      </li>
      <li class="row collapse psuedo-override">
        <span class="small-9 columns">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nulla mauris, iaculis vel ante eget, vestibulum ornare est. </span>
        <span class="small-3 columns text-right">$50</span>
      </li>
      <li class="row collapse psuedo-override">
        <span class="small-9 columns">Phasellus quis odio ac sapien congue aliquam sit amet ornare magna. Quisque consequat mauris nec turpis finibus, id bibendum dolor tincidunt.</span>
        <span class="small-3 columns text-right">$75</span>
      </li>
    </ol>
  </div>
</div>

W3C says my CSS is valid, although it is a bit of a hack.
I'm pretty baffled by the issue altogether.

Answer 3

The CSS counter approach:

1) Go back to where you tried taking the row class off the li itself and inserting a child div.row. I think this avoids a number of issues relating to the default layout of lists and list items conflicting with the default layout of rows.

2) Use CSS to insert your own list numbering with a counter, instead of using the default <ol> numbering. This will allow you to position the number where you want.

ol {list-style-type:none; margin-left:0; padding-left:0;}
li {padding-left:2em; counter-increment:li;}
li::before {content:counter(li) "."; position:absolute; margin-left:-2em;}

Fiddle: https://jsfiddle.net/9qw2akkj/