前置き

テキストに装飾を施したいとこは割と多いかと思います。
１行の、さらに１部分であればいくらでも表現できるのですが、行を跨ぐとなると難しく、また表現も絞られます。
それでも少しでもテキストを飾るため、ドットの罫線を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にします。

これを踏まえて、各指定を変更してカスタマイズしてください。

ありがとうございます！