Add CSS Classes To The First Letter Of Your Text - jQuery fancyLetter
File Size: | 6.2 KB |
---|---|
Views Total: | 925 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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:
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.