Simple Interview Formatting Using Pseudo Elements

I had a quick question today about formatting an interview. That led to some quick experimentation in Code Pen and some simple uses of pseudo class selectors.¹

When I first looked at the transcript I started to assign a class to each paragraph. That would work but was tedious. Given we were switching speakers at every paragraph I could be clever/lazy. nth-of-type will let me select odd and even elements. You can also be far fancier (every 5th etc.) but even/odd was all I needed.

p:nth-of-type(odd) {
      background-color: #efefef; /*background color for speaker c - set to white if you want it vanilla*/
}

p:nth-of-type(even) {
  background-color: pink;/*background color for speaker g - set to white if you want it vanilla*/
}

Given how pleasant that was, I figured I’d try a few more.

p::first-letter { 
  font-size: 2em;
  color: #424242;
  background-color:#fff;
  padding: 0 5px;
  margin-right: 10px;
  float:left;
  display:absolute;
  line-height: 1.2em;  
}

This CSS lets me grab the first letter (and the colon) of the paragraphs and make them a bit like a drop cap.²

p:nth-of-type(odd)::first-letter{
  background-color:#424242;
  color:#fff;
}

I wondered if I could use the selectors in combination to alternately style the first letters drop caps. Turns out you can.

Anyway a fun 10 minutes or so that might be of interest to other wanderers out there.

See the Pen demo for clare – fancy version by Tom (@twwoodward) on CodePen.