Add CSS Classes To The First Letter Of Your Text - jQuery fancyLetter

fancyLetter is a fancy jQuery plugin inspired by the CSS ::first-letter pseudo-element that applies custom CSS classes to the first letter of your text for easier customization.

See also:

• jQuery Plugin To Capitalize First Letter - Capital Letter

How to use it:

1. Insert the main JavaScript file jquery.fancyletter.js after jQuery JavaScript library.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<script src="jquery.fancyletter.js"></script>

2. Call the function on the text selector.

<p class="demo">jQuery</p>
<p class="demo">Script</p>
<p class="demo">Net</p>

$(function(){

  $('.demo').fancyletter();

});

3. That's it. The plugin will add the following CSS classes to the first letters of your block elements.

<p class="demo">
  <span class="ltr ltr-j">j</span>Query
</p>
<p class="demo">
  <span class="ltr ltr-s">S</span>cript
  </p>
<p class="demo">
  <span class="ltr ltr-n">N</span>et
</p>

4. Then you can apply your own styles to the first letters.

.ltr { ... }

.ltr-j { ... }

.ltr-s { ... }

.ltr-n { ... }

Changelog:

2019-02-28

• JS update

---

This awesome jQuery plugin is developed by craigerskine. For more Advanced Usages, please check the demo page or visit the official website.