CSS・Borderの色を途中で変更

［スポンサーリンク］

CSSでBorderの色を途中で切り替る方法です。

CSS

h2 { padding-bottom: 8px; position: relative; border-bottom: 1px solid #ccc;  }
h2:after { content: "."; line-height: 0; display: block; overflow: hidden; position: absolute; bottom: -1px; width: 30%; border-bottom: 1px solid #ecb700; }

これで borderの色が途中で変わります。

左から30％が#ecb700（黄色系）で表示されて、それ以降が#ccc（グレー系）で表示されております。

色や太さなどはお好きに調整してください。