Horizontal line after certain items no matter the visibilities

This highly depends on the HTML structure that you have and how you hide the elements (you didn't include it in your question, so this is just my assumption). I'd suggest just use ::after pseudo element on the last visible element of the same kind.

If the display: none is from inline style:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.a:not(:has(~ .a:not([style*='display: none']))):not([style*='display: none'])::after {
    content: '';
    height: 1px;
    background: black;
    width: 100%;
    display: block;
}

<!-- language: lang-html -->

case 1
<div>
  <div class="a">a</div>
  <div class="a">a</div>
  <div class="a">a</div>
  <div class="a">a</div>
  <div class="b">b</div>
  <div class="b">b</div>
  <div class="b">b</div>
  <div class="b">b</div>
</div>
<br>
case 2
<div>
  <div class="a">a</div>
  <div class="a">a</div>
  <div class="a">a</div>
  <div class="a">a</div>
  <div class="b" style="display: none;">b</div>
  <div class="b">b</div>
  <div class="b">b</div>
  <div class="b">b</div>
</div>
<br>
case 3
<div>
  <div class="a">a</div>
  <div class="a">a</div>
  <div class="a">a</div>
  <div class="a" style="display: none;">a</div>
  <div class="b">b</div>
  <div class="b">b</div>
  <div class="b">b</div>
  <div class="b">b</div>
</div>

<!-- end snippet -->

The selector

.a:not(:has(~ .a:not([style*='display: none']))):not([style*='display: none'])

just means to select class a that has no next siblings with class a that has no style="display: none" and it also has no style="display: none" itself. If you hide the element with, for instance, .hidden class, then you can change the [style*='display: none'] with .hidden.

It is solvable with simple :not and two rules (i.e. without modern :has that is yet about to be implemented in stable Firefox).

First rule that assigns separator to all visible .b's following any visible .a, and then second that takes that separator away from all .b's after any visible .b. For demonstrative purposes using simple border-top: solid; -- using ::before { content: ''; display: block; border-top: solid; }or similar instead would work the same.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.a:not([hidden]) ~ .b:not([hidden]) {
  border-top: solid;
}

.a:not([hidden]) ~ .b:not([hidden]) ~ .b {
  border-top: none
}

/* demo */
body { counter-reset: figs; }
figure { counter-increment: figs; counter-reset: as bs;}
figcaption::before { content: 'Fig 'counter(figs) ' - '; }
p { margin: 0; --m: 'visible';}
[hidden] { display: block !important; opacity: 0.3; --m: ' hidden';}
p::before { content: attr(class) '#'; }
.a { counter-increment: as; }
.b { counter-increment: bs; }
.a::after { content: counter(as) ' ' var(--m); }
.b::after { content: counter(bs) ' ' var(--m); }

<!-- language: lang-html -->

<figure>
  <figcaption>Everything visible:</figcaption>
  <p class="a"></p>
  <p class="a"></p>
  <p class="a"></p>
  <p class="b"></p>
  <p class="b"></p>
  <p class="b"></p>
</figure>

<figure>
  <figcaption>First <code>.b</code> hidden:</figcaption>
  <p class="a"></p>
  <p class="a"></p>
  <p class="a"></p>
  <p class="b" hidden></p>
  <p class="b"></p>
  <p class="b"></p>
</figure>

<figure>
  <figcaption>Last <code>.a</code> hidden:</figcaption>
  <p class="a"></p>
  <p class="a"></p>
  <p class="a" hidden></p>
  <p class="b"></p>
  <p class="b"></p>
  <p class="b"></p>
</figure>
<figure>
  <figcaption>All but first and last hidden:</figcaption>
  <p class="a"></p>
  <p class="a" hidden></p>
  <p class="a" hidden></p>
  <p class="b" hidden></p>
  <p class="b" hidden></p>
  <p class="b"></p>
</figure>
<figure>
  <figcaption>only <code>.a</code>'s visible</figcaption>
  <p class="a" hidden></p>
  <p class="a"></p>
  <p class="a"></p>
  <p class="b" hidden></p>
  <p class="b" hidden></p>
  <p class="b" hidden></p>
</figure>
<figure>
  <figcaption>only <code>.b</code>'s visible</figcaption>
  <p class="a" hidden></p>
  <p class="a" hidden></p>
  <p class="a" hidden></p>
  <p class="b"></p>
  <p class="b" hidden></p>
  <p class="b"></p>
</figure>

<!-- end snippet -->

Could be written even more simple alternatively, leaving separators even on "hidden" .bs:

.a:not([hidden]) ~ .b {
  border-top: solid;
}

.b:not([hidden]) ~ .b {
  border-top: none
}

Expanding this idea with flex and order to super simple pin (up) and filter items and separate them with separator if it make sense doodle:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

document.body.addEventListener(
  'click',
  function(e) {
    const tgt = e.target;
    if (tgt?.tagName != 'BUTTON') return;
    tgt.parentElement.style.order *= -1;
  }
);

function filter(str) {
  document.querySelectorAll('span').forEach(
    e => e[(e.textContent.includes(str) ? 'remove' : 'set') + 'Attribute']('hidden', ''));
};

<!-- language: lang-css -->

div {
  display: flex;
  flex-direction: column;
  border: 1em inset;
}

hr {
  display: none;
  margin: 0;
  border: 1em outset;
}

:not([hidden]):not([style^="order: -"])
 ~ :not([hidden])[style^="order: -"] ~ hr ,
:not([hidden])[style^="order: -"]
 ~ :not([hidden]):not([style^="order: -"]) ~ hr {
  display: block !important;
}

<!-- language: lang-html -->

<input type="text" oninput="filter(this.value)" placeholder="zonk">
<div style="">
  <span style="order:  1"><button>⇅</button> foo</span>
  <span style="order: -1"><button>⇅</button> bar</span>
  <span style="order: -1"><button>⇅</button> baaz</span>
  <span style="order:  1"><button>⇅</button> gazonk</span>
  <span style="order:  1"><button>⇅</button> qux</span>
  <span style="order:  1"><button>⇅</button> quux</span>
  <hr>
</div>

<!-- end snippet -->

Using real <hr>, because, after all, it is probably the right element to use here.