Sometimes unexpected bugs pop up at the worst time. Last night, as I was preparing for bed, I was reviewing one of my pieces from March (Some Thoughts on WWDC25). When I reached the bottom, I saw this, and my heart skipped a beat.

Those three gears, acting as a section divider, are supposed to be centered on the page, like so:

What the heck is going on here? That CSS code was written months ago, and had been working just fine. What changed? A quick check confirmed it wasn’t the code. I was using my iPad Pro 12” running iPadOS 26 beta 2; on macOS 14 (Sonoma) and macOS 15 (Sequoia) everything was fine. A bug in a beta. Hardly surprising, so I wrote up a quick test case and submitted a bug report.

I few tests later, and I confirmed it was also happening on iPad and iOS 26 beta 3—but not on macOS 26 beta 2 or 3. It also fails in Chrome on macOS.

Curious.

The code is dead simple and, admittedly, kind of hacky. This is the gist of it:

hr::before {
	content: "* * *";
	text-align: center;
}

This add the pseudo-element before to the <hr> selector. The browser displays the content where the <hr> would go, and text-align: center, well, centers the content in the container.

(There’s a bit more to it to hide the normal horizontal line, change the font, and set the size, but those aren’t relevant here.)

As simple as this code was, the fix was even easier: add display: block, and everything works in all my tests.

Great right? Bug filed, problem solved. I'd write it up for the site—a short post, with a wry observation about hacky solutions and unanticipated beta bugs, a link to the test case and the bug report, and Bob’s-yer-uncle.

Yeah, no.

I wanted to show the bug in action. Here’s what happens without display: block; here’s what happens with it. If you were on a system that behaved this way, you could see the before and after.

No, I don’t know why, I just did, OK? Be cool.

Anyway. Sometime around midnight I fired up my coding buddy and had it spit out a few lines of throwaway code. It gave some jibber-jabber about not using Javascript because Ghost sanitized user-submitted HTML to prevent XSS and layout-breaking scripts or some such.

(Ghost handles in-post Javascript just fine.)

Regardless, down the rabbit hole we went, iterating (and cursing) for four-plus hours, crafting a completely overblown set of HTML and CSS, until, at the very buttcrack of dawn, we had something I was happy with.

Which I then completely threw out this afternoon after asking my smarter coding buddy to help, and it did a much, much better job in much less time. (And used Javascript.)

All so I can give you this. Behold!

hr::before {
  content: "* * *";
  text-align: center;
  font-size: 1.5rem;
  display: block;
}Copy

Notice the beauty of a toggle instead of a checkbox! How the display: block; hides or shows as the toggle is activated! How (on affected devices…) the three asterisks are either centered or left-aligned to match the state of the toggle and code! Pure CSS, HTML, and Javascript magic!

Over four hours to demonstrate a simple effect for a minor, rather inconsequential bug? Yeah, a pretty colossal waste of time.

Can’t wait for the next session!