Using CSS to force showing right single quotation mark instead of apostrophe

Question

For some reasons I want that my static blog shows right single quotation mark (’) where there is an apostrophe ('). Is it possible to force it using CSS?

Try changing the font-family. It seems the font-family's apostrophe and right single quotation is similar. — Chirag Maniar, Feb 22 '22 at 12:53
Thank you @ChiragManiar, I always use Georgia, and it presents them with different characters. — Mehdi Abbassi, Feb 22 '22 at 13:00
You can get the system to pick up a character from a different font. Would that help? — A Haworth, Feb 22 '22 at 13:01

score 1 · Accepted Answer · answered Feb 22 '22 at 12:58

Important: CSS is not meant to change or replace text. You can use some client-side scripting language like Javascript or Server-side languages to do text change functionality

OP Solution

It looks like a font issue, try changing the font that you have or completely removing the font family to troubleshoot. Google Fonts is a good place to start testing your text, if you know your font name and can find it in there.

HAck: If you really want to hack it using CSS, you can wrap your apostrophe (') in a span tag and use :before or :after CSS selector to change its content using the content property. Again it's not recommended to do it and if fonts is an issue, you may see the same behaviour again

Working Example

span {
  display: none
}

div:after {
  content: '>';
}

<div>Quote <span> ' </span></div>

Using CSS to force showing right single quotation mark instead of apostrophe

1 Answers1