ボーダーが2色の見出しのつくり方

こんにちは。そういえば、近畿地方は早くも梅雨に入りましたね(°_°)　驚きました(°_°)
普通6月くらいのイメージですが、早く入った分早くあけるんでしょうか・・・？

まぁ雑談はさておき、今日は「ボーダーが2色の見出しのつくり方」についてメモがてら書きます！

イメージはこんなデザインです。

ちょっとおしゃれですよね(^○^)

私の場合、初見では難しく考えすぎてどうしたらいいか分からなかったのですが、方法を教えてもらうと考え方はとてもシンプルだと思いました！
常々、もっと頭を柔軟に考える必要があるなぁと実感します・・・(＞＜)

先にヒントを書いてみますね−！
普通に灰色の下線をつくって、緑色部分は擬似要素でつくります。
なんとなく思い浮かんだでしょうか？？

ではコーディングのせます〜！

コーディング

HTML編

<h2 class="sectTit">見出し見出し見出し</h2>

CSS編

.sectTit {
  position: relative;
  font-weight: bold;
  line-height: 1.3;
  font-size: 22px;
  border-bottom: 3px solid #e6e6e6;
  padding-bottom: .4em;
}

.sectTit:before {
  position: absolute;
  bottom: -3px;
  width: 100px;
  height: 3px;
  display: block;
  content: "";
  background: #1a914a;
}

以下ポイントです〜