CSS for markdown blockquote attribution

It’s Blogvent, day 22 where I blog daily in December!

I write my blog posts in markdown, and I write quotes like so:

> I miscounted the men!
>
> - Gavin Volure

This results in the following:

I miscounted the men!

• Gavin Volure

It always bugged me how the HTML generated a

for the quote author, because the default bullet point is the disc (•) and looked like a stray list out of nowhere.

But, I didn’t want to un-style lists entirely, in case something I quoted had a list in it.

Now, the way my blog is styled, I target the author by selecting the last

in the generated

, and going from there!

Here’s the code and a demo:

See the Pen Fading away text effect by Cassidy (@cassidoo) on CodePen.

So now, I can have quotes like what you saw above, but also quotes like this:

• Basketballs
• Hula hoops
• Rollercoaster loop-the-loops

You just heard the Woggels sing a very silly list of things! Woggel power!

• The Woggels

Hope this was helpful for you!