jQuery Fancy Letter

A jQuery plugin that gives you more control than :first-letter

Download

Lorem

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi sapiente corporis rem repellat inventore ullam nostrum maiores porro, alias soluta veritatis pariatur dignissimos sed odit, ad similique, neque sequi facere.

Ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque mollitia, velit vel voluptas quo dignissimos nemo nostrum, placeat dicta id quaerat. Maiores est officiis ducimus aspernatur. Nam quos porro, praesentium.

Dolor sit amet, consectetur adipisicing elit. Mollitia aspernatur minima vero aliquam obcaecati distinctio libero esse, corporis tenetur, harum ab dolores nihil unde alias sed totam voluptas voluptatem beatae. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque vel est, laudantium tenetur placeat aliquid qui excepturi? Quod impedit, ducimus. Est, libero quas eaque reprehenderit.

Usage

<h3 class="fancy-ltr">Heading</h3>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="jquery.fancyletter.js"></script>
<script>
  $(function(){
    $('.fancy-ltr').fancyletter(
      // optional settings - just remove all of this if you want to keep defaults
      {
        // base class of character
        commonClass: 'ltr',
        // prefix class of character - actual lowercase character will get appended to this string
        prefixClass: 'ltr-',
        // if you want to match things other than letters, you better be good at regex
        characters: '[a-zA-Z]'
      }
    );
  });
</script>