html - block 元素下方的三个点

Question

我想设计如下图的东西，但不知道该怎么做!

三点标题

所以我只想在标题下方的中心显示 3 个点。但是当我尝试使用 dotted 时border-bottom它需要整个 <h1>标签。

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

<h1>My Title</h1>

Answer 1

为此使用了 ::after 伪元素

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>