.mor { font-size: 2em; } 
 <p> Л <span class="mor">а</span> в <span class="mor">а</span> н <span class="mor">д</span> а </p>

I understand this can be done through pseudo-classes. How?

  • And why does not the current option? - Roman Grinyov

1 answer 1

It seems like Adobe was planning to push the selector :nth-letter() , but something is not any news, so (for now?) Browsers do not know this. You can use the nthEverything library - it will add support for the necessary selectors, automatically parsing the text into letters ( use case ), but, of course, preparing the text on the server side will be much more productive.

 #letters:nth-letter(even){ font-size: 120%; } 
 <p id="letters">Чётные буквы больше на 20%</p> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.rawgit.com/FWeinb/nthEverything/master/jquery.nthEverything.min.js"></script>

  • one
    I decided to remember JS and wrote my bike: jsfiddle.net/ansx1cdf . PS Although yes, it’s better to disassemble everything by symbols and give each symbol a class ... Something I missed this moment: D - Roman Grinyov