Three dots below block element

Question

I wanted to design something as like below image, but not sure how to do!

Title with three dots

So I wanted to display only 3 dots on center below my title. But when I try with dotted border-bottom it takes entire <h1> tag.

h1{    text-align: center;    font-size: 50px;    color: red;    border-bottom: 10px dotted red;  }

<h1>My Title</h1>

Answer 1

Used ::after pseudo element for that

h1{    text-align: center;    font-size: 50px;    color: red;    line-height: 30px;  }  h1::after{    content:"...";    font-size: 50px;    color: gold;    display: block;    text-align: center;    letter-spacing: 5px;  }

<h1>My Title</h1>