CSSでBorderの色を途中で切り替る方法! コピペで使えるWEB制作講座

CSS講座

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(グレー系)で表示されております。

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

この投稿へのコメント

コメントはありません。

コメントを残す