如何用CSS为含page-break-before属性的div添加仅屏幕显示的灰色条？

完全可以用CSS完成你要的效果，具体实现思路如下：

• 利用属性选择器精准匹配带有page-break-before: always内联样式的.containerMeeting元素
• 通过:before伪元素在目标元素前生成灰色分隔条
• 借助媒体查询在打印模式下隐藏这个分隔条

完整CSS代码示例 #

/* 屏幕模式下，给符合条件的div添加前置灰色条 */
div.containerMeeting[style*="page-break-before: always"]::before {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  background-color: #ccc;
  margin: 20px 0; /* 上下间距可按需调整 */
}

/* 打印模式下隐藏灰色条 */
@media print {
  div.containerMeeting[style*="page-break-before: always"]::before {
    display: none;
  }
}

代码说明 #

1. 属性选择器：[style*="page-break-before: always"] 会匹配所有内联样式中包含该字符串的.containerMeeting元素，确保只有设置了分页属性的div才会显示灰色条
2. 伪元素样式：通过::before生成一个块级元素，设置背景色、高度和间距来模拟分页分隔效果，样式参数可根据实际需求调整
3. 媒体查询：@media print 针对打印场景生效，将伪元素设为display: none，保证打印时不会出现这条灰色条

内容的提问来源于stack exchange，提问作者Andrew Truckle