slick.jsでボタン部分に文字を入れたい

Question

slick.jsでボタン部分にそれぞれ「いち」「に」「さん」と文字を入れたいですが、やり方がわかりません。
ボタンはhover時に色を変えたいです。
今回コードではなく、色々な方法を教えてくださいますと助かります。

<ul class="slick-dots">
          <li>いち</li>
          <li>に</li>
          <li>さん</li>
        </ul>

    $(document).ready(function(){
        $('.slider').slick({
           dots:true,
           slidesToShow: 1,
           slidesToScroll: 1
        });
    });

Answer 1

slick.jsではデフォルトでボタン部分には数字がふってあります。
それを任意の文字に変更するためには、font-sizeを0にして、擬似要素beforeを使ってcontent="テキスト"とするのが有効でした。