如果列表项分成两行，则需要使用全宽度的顶部边框

Question

I have a challenge with a menu of list items. The designer wants to add a line above the items if they break into two lines (in smaller screens). The line should span 100% of the ul width, even though the the second line of list items are shorter. It should look like this image - only with the grey line above the list items.

I have fiddled with it here trying to use a :pseudo element , but still no luck in getting the grey line of the second row take up 100% of the width.

Any ideas?

Answer 1

One possible solution sis to make the pseudo-element really big.

li:before {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  width: 2000px;
  height: 1px;
  border-bottom: 2px solid #ccc;
  z-index: 1;
}

The designer wants to add a line above the items if they break into two lines (in smaller screens).

Note: Since CSS can't detect line breaking this would always apply..so you'd have to apply this in a media query.

 ul { list-style: none; margin: 0; overflow: hidden; } li { display: inline-block; margin-right: 2px; padding: 5px; position: relative; z-index: 2; } li:before { content: " "; position: absolute; top: 0; left: 0; width: 2000px; height: 1px; border-bottom: 2px solid #ccc; z-index: 1; } div { padding: 5px; width: 75%; margin: auto; overflow: hidden; } 

 <div> <ul> <li>List item</li> <li>List item</li> <li>List item</li> <li>List item</li> <li>List item</li> <li>List item</li> <li>List item</li> <li>List item</li> <li>List item</li> </ul> </div>