hanging-punctuation CSS property it’s possible to control whether a punctuation mark should hang at the start or end of a line of text, so that they do not disrupt the ‘flow’ of a body of text or ‘break’ the margin of alignment.
Here’s a pen:
See the Pen mWJJNx by Joel Drapper (@joeldrapper) on CodePen.
☝️ If that’s not working for you, here’s why: at the time of writing
hanging-punctuation is only supported on Safari.
To cater for browser that don’t support
hanging-punctuation you can (somewhat) fake
hanging-punctuation: first; using a negative
text-indent, along with an override for browser that do (using
See the Pen Hanging Punctuation in CSS with @supports and Custom Properties by Dudley Storey (@dudleystorey) on CodePen.
“Hangable” characters targeted by