css in html how to,css - How to make a vertical line in HTML - Stack Overflow

If your goal is to put vertical lines in a container to separate side-by-side child elements (column elements), you could consider styling the container like this:

.container > *:not(:first-child) {

border-left: solid gray 2px;

}

This adds a left border to all child elements starting from the 2nd child. In other words, you get vertical borders between adjacent children.

> is a child selector. It matches any child of the element(s) specified on the left.

* is a universal selector. It matches an element of any type.

:not(:first-child) means it's not the first child of its parent.

I think this is better than a simple .child-except-first {border-left: ...} rule, because it makes more sense to have the vertical lines come from the container's rules, not the different child elements' rules.

Whether this is better than using a makeshift vertical rule element (by styling a horizontal rule, etc.) will depend on your use case, but this is an alternative at least.