块元素下面有三个点

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>

Answer 2

一个伪元素和一个多个阴影.(放下或盒子)

注意:使用此方法可以控制每个点的颜色.

投下阴影

  h1 {
  text-align: center;
  font-size: 50px;
  color: red;
  position: relative;
}

h1::after {
  content: "";
  position: absolute;
  width: .25em;
  height: .25em;
  border-radius: 50%;
  background: orange;
  bottom: 0;
  left: 50%;
  margin-bottom: -.5em;
  transform: translateX(-50%);
  filter: drop-shadow(.5em 0px 0px blue) 
          drop-shadow(-.5em 0px 0px green);
}

<h1>My Title</h1>

Box Shadow(感谢Ilmari Karonen)

  h1 {
  text-align: center;
  font-size: 50px;
  color: red;
  position: relative;
}

h1::after {
  content: "";
  position: absolute;
  width: .25em;
  height: .25em;
  border-radius: 50%;
  background: orange;
  bottom: 0;
  left: 50%;
  margin-bottom: -.5em;
  transform: translateX(-50%);
  box-shadow: .5em 0px 0px blue, 
              -.5em 0px 0px green;
}

<h1>My Title</h1>

Answer 3

使用::after伪元素.

h1{
  text-align: center;
  font-size: 50px;
}
h1:after{
  content: "";
  display: block;
  width: 50px;
  margin: 10px auto;
  border-bottom: 10px dotted red
}

<h1>My title</h1>

Answer 4

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

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>

更新：是的，当然，我承认这不是完美的解决方案。但同时我确信这将是最好的解决方案之一，您可以通过简单的方式自定义每个点的不同颜色和大小，如下代码片段所示。否则我会同意曼尼什帕特尔的答案是最好的。

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>