CSSでborder色を途中で切り替る

サンプル

sass

h2

  padding-bottom: 8px
  position: relative
  border-bottom: 1px solid #dcdcdc
  &:after
  content: "."
  line-height: 0
  display: block
  overflow: hidden
  position: absolute
  bottom: -1px
  width: 10%
  border-bottom: 1px solid #db5767

css

h2 { margin-right: 20px; text-align: left; padding-bottom: 8px; position: relative; border-bottom: 1px solid dcdcdc; }

h2:after { content: "."; line-height: 0; display: block; overflow: hidden; position: absolute; bottom: -1px; width: 10%; border-bottom: 1px solid #db5767; }