Here are four patterns you will use again and again.
1. A dark overlay on a photo
index.html
HTML
<style>
.hero { position: relative; height: 130px; color: #fff; background: linear-gradient(135deg, #1a5276, #d94a00); display: grid; place-items: center; }
.hero::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.35); }
.hero h2 { position: relative; margin: 0; }
</style>
<div class="hero"><h2>Overlay makes text readable</h2></div>inset: 0 is shorthand for top: 0; right: 0; bottom: 0; left: 0;. The heading has position: relative so it stays above the overlay.
2. A CSS-only tooltip
index.html
HTML
<style>
[data-tip] { position: relative; cursor: help; border-bottom: 1px dotted #1a5276; }
[data-tip]::after {
content: attr(data-tip); position: absolute; left: 0; bottom: 130%;
background: #1c1b1f; color: #fff; font-size: 12px; padding: 4px 8px; border-radius: 4px;
white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s;
}
[data-tip]:hover::after, [data-tip]:focus::after { opacity: 1; }
p { margin-top: 36px; }
</style>
<p>The word <span data-tip="Cascading Style Sheets" tabindex="0">CSS</span> has a tooltip.</p>Add tabindex="0" so keyboard users can focus it too, and keep tooltips for non-essential hints.
3. A decorative heading underline
index.html
HTML
<style>
h2.fancy { position: relative; padding-bottom: 10px; }
h2.fancy::after { content: ""; position: absolute; left: 0; bottom: 0; width: 50px; height: 4px; background: #d94a00; border-radius: 2px; }
</style>
<h2 class="fancy">Opening hours</h2>4. A divider with text in the middle
index.html
HTML
<style>
.or { display: flex; align-items: center; gap: 10px; color: #888; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: #ccc; }
</style>
<div class="or">or</div>Both pseudo-elements become flex items on each side of the text, and flex: 1 makes them grow to fill the line.