I’m mainly writing this here so I’ll find it again in a few years when I need to do this and can’t remember how I did it before.

Say you want a nice looking, centered text header integrated with a horizontal rule, with the line on both sides of the text and a bit of a gap, like this:

Here’s My Nice Header

The only HTML involved there is this:

<h4 class="my-nice-header">Here's My Nice Header</h4>

Besides Flexbox, obviously, I’m leaning heavily into CSS Pseudo-elements to make this work. It occurred to me immediately that I could use the ::before and ::after pseudo-elements for the lines, but my real flash of insight (at least it felt like a flash of insight to me) was using the ::first-line pseudo-element to apply Flexbox styling to the text itself, without needing anything like a nested <span> tag.

Here’s the exact CSS code I’ve included in the page to render this header:

.my-nice-header {
  align-items: center;
  display: flex;
  gap: 1rem;
  width: 100%;
}
.my-nice-header::before, .my-nice-header::after {
  background: gainsboro;
  content: '';
  display: block;
  flex: 1;
  height: 1px;
}
.my-nice-header::first-line {
  display: block;
  flex: 1;
  text-align: center;
}

Note: I removed some font styling and margins that aren’t pertinent to the actual “trick” itself. I left in the background color, because you need to specify some color for the lines not to be invisible.

There’s some buzz going around concerning Apple’s new iPad commercial and its similarity to one Apple produced for the Newton two decades ago. Though I’m not the first to comment on this, I have a few thoughts of my own, so here goes…

First, let’s watch both commercials. I did not remember this (apparently) “classic” (in John Gruber’s words) ad for the Newton:

Now, watch Apple’s new iPad ad:

Wow. Homage indeed. I doubt very many people remember the Newton commercial, but the iPad commercial is stunningly similar. This had to be deliberate, but I’m wondering what exactly that deliberateness is supposed to mean.

Well, I’ll tell you this: watching the two ads back-to-back, I’m left feeling that a) the Newton really was way ahead of its time, and b) the Newton ad seems like one of those futuristic concept videos Apple (among other computer makers) seemed to love producing in the 1980s.

Newton was a vision of the future. iPad is the reality. That Newton actually became a shipping product says a lot about Apple’s ability to realize its vision (compared to the long line of never-to-be-made concepts that have come from Microsoft over the years, most recently… well… this). But the Newton was too far ahead of its time. Then again, it ushered in the PDA era, which ushered in the “smartphone” era, which led to the iPhone and now the iPad. So maybe Apple was really seeding (if you’ll pardon the pun) its own future with the Newton.

There are two key lines that for me define the difference between the two ads:

“Newton can receive a page and sends faxes and, soon, electronic mail.”

“(iPad is) 200,000 apps and counting. All the world’s websites in your hands.”

Granted, paging and faxing were still relevant technologies when the Newton was released, but they were already doomed, and the best Apple could say was that “soon” Newton could handle “electronic mail” (even then, using a soon-to-be-antiquated term). In contrast, the iPad hits the ground running, leveraging the existing success of the iPhone, and with forward momentum for future technologies. Newton was about what could be, but iPad is.

It’s funny… you can go on indefinitely, drinking thoroughly safe and adequately pleasant-tasting tap water, never questioning its quality, and then all of a sudden, one day, you decide you want bottled water.

From that moment forward, it’s as if 6 molar hydrochloric acid flowed from the tap. It’ll kill you! Dissolve your esophagus! Eat away your stomach lining!

Pheh… well, it’s ridiculous, but it happens. So now I am thirsty, the week’s supply of bottled water expended, and it’s 27 minutes since the market downstairs closed. What am I to do? I need water! Sweet elixir of life!

Oh yeah…

Update: Since I posted this, my ongoing music library project (which is what’s keeping me up to 1 AM and beyond tonight) is still underway, and I’ve broken down and resorted to drinking a can of Diet Sprite. What can I say? I was obeying my thirst.

I’m a tool.