CSSで色違いの2重線、3重線を作る方法

CSSで二重線をひく場合、通常、border-style: doubleを使います。 p{ border-style: double; } 単純な同一色で同一の太さの2重線をひく場合はこの方法で問題ないですが、例えば内線と外線の色を変えたり、それぞれ線の太さを変えたりすることは出来ません。 またborder-styleはダブルはありますが、トリプル、3重線はありません。 そこでborder:doubleを使わずに思い通りの2重線を付ける方法をご紹介します。 色違いの2重線、3重線を引く 今回の作り方は疑似要素のbeforeとafterを使います。 構成は下記のようになります。