Block quote style help

[vector0]

I’m having trouble replicating this block quote style in CSS and was hoping that someone here might have some suggestions.

The trick is to include the padding indicated by the magenta lines and the 1px divider through the centre. I’ve tried using text highlight and images for the quotation marks, but can’t figure out a way of including the padding with this method.

Here’s the layout

[Nishant]

I think you want to do something like this….

http://codepen.io/maxwbailey/pen/sulwF

[Paulie_D]

I prefer this: http://codepen.io/Paulie-D/pen/IxKEs

More semantic.

[vector0]

Thanks for the input guys – there’s just one thing, and it’s the problem that I was having originally.

If you look at the reference pic, there are magenta lines indicating padding at the end of the first line and the start of the second.

Is there a way you can think of to include that in your example?

[Paulie_D]

Doubtful…you are looking to add something that is actually inside the block quote where the text wraps.

How would one select that?

[Author]

Posts