content after letter-spacing css

Question

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:

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

How can it be done?

Answer 1

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

• on dabblet