I need to remove right border when line breaks-CodePudding

I have list inline-block with right border after every element. Problem: I need to remove right border when line breaks, how can I do it? Doesn't depend on the length, just need to remove it before every line break.

ul{
  width: 200px;
  display: inline-block;
  list-style: none;
  text-align: center;
}

li{
  display: inline-block;
  border-right: 1px solid rgb(0, 0, 0);

}

<ul>
  <li>Any text</li>
  <li>Any text</li>
  <li>Any text different</li>
  <li>Any text</li>
  <li>Any text different</li>
  <li>Any text sas s as s</li>
  
</ul>

CodePudding user response：

Problem: I need to remove right border when line breaks, how can I do it?

There is no easy way to do that. CSS has no mechanism to select an element based on where a line breaks, or whether it is the "last" item on a line.

But - you can do it the other way around. Put the border on the left side of the items, move them all to the left by one pixel - and have the UL cut off any overflow.

ul {
  width: 200px;
  display: inline-block;
  list-style: none;
  padding: 0;
  overflow: hidden;
}

li {
  display: inline-block;
  margin-left: -1px;
  border-left: 1px solid rgb(0, 0, 0);
}

<div>
  <ul>
    <li>Any text</li>
    <li>Any text</li>
    <li>Any text different</li>
    <li>Any text</li>
    <li>Any text different</li>
    <li>Any text sas s as s</li>
  </ul>
</div>

CodePudding user response：

This is hacky so probably just for fun, but if you give each li a before pseudo element with both left and right border of white and position them correctly they will overlay each other.

Then apply mix-blend-mode: difference - two whites make a black so the bar will be seen but if there is only one bar then as it's white it won't be:

ul {
  width: 200px;
  display: inline-block;
  list-style: none;
  text-align: center;
}

li {
  display: inline-block;
  position: relative;
}

li::before {
  content: '';
  border-right: 1px white solid;
  border-left: 1px white solid;
  mix-blend-mode: difference;
  position: absolute;
  width: 100%;
  height: 100%;
  padding-left: 1.5px;
  padding-right: 1.5px;
}

<ul>
  <li>Any text</li>
  <li>Any text</li>
  <li>Any text different</li>
  <li>Any text</li>
  <li>Any text different</li>
  <li>Any text sas s as s</li>

</ul>