Home/ Questions/Q 8459545
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T13:21:38+00:00

My purpose is to have two letters in a pseudo-element’s content, with a spacing

  • 0

My purpose is to have two letters in a pseudo-element’s content, with a spacing of 1 pixel between each letter.

I have tried the obvious, which is assigning a letter-spacing of 1 pixel:

#tweetList > li > .blockstyle > blockquote p.tweettext:before{
    content: '\2018\2019';
    font-family: 'ocr';
    font-style: normal;
    font-weight: 400;
    position: absolute;
    font-size: 120px;
    top: 0px;
    left: -120px;
    color: rgba(26,114,189, 1);
    text-shadow: 7px 14px 10px rgba(0, 0, 0, 0.1);
    letter-spacing: 1px;
}

The problem is that the two apostrophes are not getting the desired spacing. Here’s a snapshot of the result:

result apostrophe spacing

And here’s what I’m trying to achieve:

desired apostrophe spacing

How can it be done?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Problem

    The issue lies within the glyph’s width. As each apostrophe letter is taking more space in width than the actual glyph, they seem departed.

    Solution

    To solve this, adjust the letter spacing by assigning a negative value, like so:

    #tweetList > li > .blockstyle > blockquote p.tweettext:before{
    content: '\2018\2019';
    font-family: 'ocr';
    font-style: normal;
    font-weight: 400;
    position: absolute;
    font-size: 120px;
    top: 0px;
    left: -120px;
    color: rgba(26,114,189, 1);
    text-shadow: 7px 14px 10px rgba(0, 0, 0, 0.1);
    letter-spacing: -.2em; /* <-- */
}

    Demo

    • 0