CSS 擬似要素で見出しに下線を引く

CSSの擬似要素をちゃんと使ったことがなかったのでせっかくだし使ってみた。
borderじゃなくあえて擬似要素を使うのは、下に引く線を角丸にしたいから。
(borderだと角丸にできない)

<h1>Heading</h1>

横幅120px、高さ4pxの棒みたいなのをおく
marign: 0 autoで中心ぞろえにした。

h1:after {
  content: "";
  margin: 0 auto;
  display: block;
  width: 120px;
  height: 4px;
  border-radius: 2px;

  background: linear-gradient(25deg, #F13F79, #FFC778); 
}

そうすると見出しに下線がひける。