html - 块元素下方的三个点

我想设计如下图所示的东西，但不确定如何做!

三点标题



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

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

<h1>My Title</h1>

最佳答案

试试下面的代码片段。使用跨度创建点并将它们居中对齐。

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

.three-dots {
  text-align: center;
}

.three-dots span {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: red;
  display: inline-block;
  margin: 0 5px;
}

<h1>My Title</h1>
<div class="three-dots">
  <span></span>
  <span></span>
  <span></span>
</div>

更新:当然可以，我接受这不是完美的解决方案。但是同时确保这将是最好的解决方案之一，您可以轻松地自定义每个颜色和大小不同的点，如下段所示。否则我会同意Manish Patel答案是最好的答案。

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

.three-dots {
  text-align: center;
}

.three-dots span {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: red;
  display: inline-block;
  margin: 0 5px;
}

span.first {
  background-color: green;
  width: 10px;
  height: 10px;
}

span.third {
  background-color: blue;
  width: 20px;
  height: 20px;
}

<h1>My Title</h1>
<div class="three-dots">
  <span class="first"></span>
  <span class="second"></span>
  <span class="third"></span>
</div>

关于html - 块元素下方的三个点，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46907903/