I've used {style} and {div} macros to make some custom sections on a Confluence page. And as a part of these sections, I've added a ::before selector with some content and styles to act as a label.
The CSS I've used follows:
div.section-wip {
margin-left:20px;
margin-bottom:20px;
padding:10px;
background-color:#ebeff5;
border:1px dashed blue;
border-radius:5px;
}
div.section-wip::before {
content:"Work in Progress:";
display:block;
font-weight:bold;
color:#606098;
}
div.section-planned {
margin-left:20px;
margin-bottom:20px;
padding:10px;
background-color:#eaf3ea;
border:1px dashed green;
border-radius:5px;
}
div.section-planned::before {
content:"Planned Feature:";
display:block;
font-weight:bold;
color:#4f884f;
}
Interestingly, it works perfectly in the Edit Preview, however it looks like the ::before selectors are ignored after saving the page, as this screenshot illustrates:
stupidconfluence.jpg