前置き
テキストに装飾を施したいとこは割と多いかと思います。
１行の、さらに１部分であればいくらでも表現できるのですが、行を跨ぐとなると難しく、また表現も絞られます。
それでも少しでもテキストを飾るため、ドットの罫線をcssで表現してみました。
サンプル
仕様
- X軸の
linear-gradientの色指定とbackground-colorの色指定を合わせることで、見えない無数の縦線を引きます。 - X軸の
background-sizeをlinear-gradientの各サイズ指定*2に指定することで、ドットのサイズを調整します。（上で引いた無数の縦線によって、横線が打ち消されドットのようになります） - Y軸の
background-sizeとline-heightの値を合わせることで、テキスト上の正しい位置で罫線を描画します。 -
padding-bottomにlinear-gradientのサイズ指定と同じ値を設定することで、テキストの最終行に罫線を描画します。 - 1pxのドットを引く場合、ieでは潰れてしまう（拡大表示をすると表示されるのですが、100%表示では非表示になる）ので、グラデーションの開始の値を1.1pxにします。
これを踏まえて、各指定を変更してカスタマイズしてください。
参考
CSSだけでノート風の罫線を作る（http://www.mk2-style.com/blog/archives/1387）
ありがとうございます！