Items in a list should have a top border that spans the full width if they wrap onto a second line

Question

Items in a list should have a top border that spans the full width if they wrap onto a second line

Currently, I am facing a challenge with a menu containing list items. The designer's requirement is to insert a line above the items if they break into two lines on smaller screens. This line should extend across 100% of the ul width, even if the second row of list items is shorter. The expected outcome can be seen in this image - only with the addition of a grey line above the list items.

https://i.sstatic.net/1SBsV.png

I have been experimenting with it here by attempting to utilize a :pseudo element, but so far, I have not succeeded in achieving the desired result of having the grey line from the second row span 100% of the width.

Does anyone have suggestions or solutions?

html css list

Answer 1

Answer №1

One clever solution is to enlarge the pseudo-element significantly.

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

The designer aims to insert a line above the items when they wrap into two lines (on smaller screens).

Note: As CSS cannot identify line breaks, this effect would be applied universally unless enclosed 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>

Answer 2

One clever solution is to enlarge the pseudo-element significantly.

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

The designer aims to insert a line above the items when they wrap into two lines (on smaller screens).

Note: As CSS cannot identify line breaks, this effect would be applied universally unless enclosed 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>

Items in a list should have a top border that spans the full width if they wrap onto a second line

Answer №1

Similar questions

Methods for Obtaining the Base URL Together with href Links

Using JavaScript to modify a section of an anchor link attribute

Text is misaligned with the cursor position

Ordering the list based on the highest number of matching items

Expanding navigation bar onto a second line with the help of Bootstrap

I require the flexbox children to be arranged in a regular manner

Guide on excluding the first row when referencing all rows with CSS

Having trouble installing node-sass through npm

CSS might not always work properly on all web browsers, but it functions perfectly on Eclipse

Overriding PrimeNG styles with Bootstrap _reboot.scss

Wordpress team exhibition

JSON to HTML Table Comparison and Notification

Imitate the actions of images with {width: 100%; height : auto} properties

Is there a way to incorporate animation into a :hover element?

Is there a problem with the background size?

Updating contact list to a database table structure

Having issues with media queries functioning incorrectly in VS Code

Leverage the power of Next.js to dynamically render a specific section of an HTML webpage

Position the div to align with just one side of the table-cell

Using HTML and CSS to create a sticky overlay effect