How to Create a Responsive Horizontal List Separator Using Only CSS?

Creating a Responsive Separator for Horizontal List

In the original question, the user desired a responsive separator that would remove vertical lines at the line breaks caused by viewport size. For example, a wide viewport might display:

-> Item 1 | Item 2 | Item 3 | Item 4 | Item 5 <-

While a small viewport might display:

-> Item 1 | Item 2 | Item 3 <-
-> Item 4 | Item 5 <-

CSS-Only Solution

In response to this query, an astute user provided a CSS-only solution that exploits the fact that trailing and line trailing white space automatically collapses:

document.write(`<div>`
+ `word<b> </b>`.repeat(42)
+ `</div>`);<pre class="brush:php;toolbar:false">b {
    background: red;
    outline: 1px solid blue;
}
div {
    resize: both;
    overflow: hidden;
}

By creating a long string of repeated words separated by a bold tag, we can effectively create a horizontal line that will collapse at the line break without leaving any vertical lines.

Additional Considerations

While this solution provides an elegant CSS-only method for achieving the desired result, it is important to note that it may not be suitable for all scenarios. For instance, if you require precise positioning or want to customize the appearance of the separator, you may need to consider JavaScript or a more complex CSS approach.

The above is the detailed content of How to Create a Responsive Horizontal List Separator Using Only CSS?. For more information, please follow other related articles on the PHP Chinese website!