Search code examples
htmlcssapostrophesingle-quotes

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

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?

Solution

  • 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>