Can I use CSS to inject a band of colour before the div?

Question

Take this HTML snippet (I don't want to change the HTML syntax if possible):

<div class="containerMeeting" style="page-break-before: always">
</div>

In screen mode I would like a think grey band to be displayed before the div to mimic a page break. Print mode would not show it.

Can I use any CSS to produce this behaviour?

To clarify, I only want this band of colour if I have specified the page break property.

Answer 1

You can use the ::before pseudo-element, given that the HTML content remains consistent:

[style*="page-break-before"]::before {
  content: '';
  display: block;
  margin: 5px 0;
  height: 2px;
  width: 100%;
  background-color: #aaa;
}

Try it:

[style*="page-break-before"]::before {
  content: '';
  display: block;
  margin: 5px 0;
  height: 2px;
  width: 100%;
  background-color: #aaa;
}

Barfoo<div class="containerMeeting" style="page-break-before: always">
Foobar</div>