CSS Data Attribute Override

In my blog articles I sometimes insert callout boxes with technical information. The content of these callout boxes is incidental to the main gist of the article (and I style these blocks accordingly), but some readers may be interested.

I give those elements the class of .tech-note and an optional data-attribute data-prompt.

<div class="tech-note">
	The instructions that follow are based on preliminary research; 
	use this information in a testing environment only.
</div>

<div class="tech-note" data-prompt="In case you were wondering...">
	Yes, I have an affiliate relationship with the owners of this AirBnB, 
	but I wouldn't recommend them if I didn't make a huge commission 
	from every referral.
</div>

Did you catch the difference?

By default (i.e., if no data-prompt attribute is provided), the default phrase Technical Aside: is displayed above the content of the div.

If a data-prompt attribute is provided, however, that value will be displayed above the content of the div.

Here’s the CSS:

.tech-note::before {
	content: "Technical Aside:";
	display: block;
	font-weight: 600;
}
/* Override when a data attribute is present */
.tech-note[data-prompt]::before {
	content: attr(data-prompt);
}

Notes

• Line 2: The default heading for the content.
• Line 8: If a data-prompt is defined, this will be the heading for the content.