Easy Text Underline Decoration Plugin With jQuery - Bottline

Bottline is a minimalist jQuery text decoration plugin that helps add an easy to style bottom line under your text similar to the CSS text-decoration:underline; property.

How to use it:

1. Add jQuery library and the jQuery Bottline plugin to the html page.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="teskly.bottline.js"></script>

2. Add the following styles to your existing CSS file.

.bottline-element { display: inline; }

.bottline-element {
  border-bottom-width: 1px;
  border-bottom-color: black;
}

.bottline-solid { border-bottom-style: solid; }

.bottline-dashed { border-bottom-style: dashed; }

.bottline-dotted { border-bottom-style: dotted; }

3. Calling the function on the container will add a 'dashed' line under the text.

$('.container').bottline();

4. Change the default line styles.

$('.container').bottline({

  // or 'dotted', 'solid'
  style: 'dashed'
   
});

---

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