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.

You can use the @media print query to apply styling only to print mode, e.g. hide the grey band. Also, consider using a class, e.g. .page-break so you can easily re-use the page-break-before styling across elements. — Kostas Minaidis, Mar 16 '23 at 09:55

InSync · Accepted Answer · 2023-03-16T10:05:18.337

2

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>

edited Mar 16 '23 at 10:05

answered Mar 16 '23 at 09:51

InSync

I wrapped it in `@media screen` block. All good! – Andrew Truckle Mar 16 '23 at 10:35

1 Answers1