content after letter-spacing css
-
29-06-2021 - |
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?
La solution
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
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow