块元素下面有三个点

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伪元素

＆＃13;

＆＃13;

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;
}

＆＃13;

<h1>My Title</h1>

＆＃13;

＆＃13;

＆＃13;

Answer 2

一个伪元素和一个多个阴影。 （丢弃或框）

注意：使用此方法，您可以控制每个点的颜色。

投影

<h1>My Title</h1>

  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;
}

Box Shadow （感谢Ilmari Karonen）

<h1>My Title</h1>

SELECT a.collegename, d.id 
FROM dean AS d
INNER JOIN allotement AS a ON a.city = d.city
 AND d.collegename <> a.collegename
 AND d.id <> a.id
WHERE d.id = 1

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

只需使用 :: after 伪选择器，并为h1元素定义 line-height ，以垂直分隔标题中的点。使用 Georgia 作为点的网络字体，因为 Arial 具有平方点。

请记住，您可以使用这两种语法，但最好使用::after来区分 来自伪元素的伪类。

/* CSS3 syntax */
::after

/* CSS2 syntax */
:after

  

CSS3引入:: after表示法（用两个冒号）来区分   来自伪元素的伪类。浏览器也接受：之后，   在CSS2中介绍。警告

＆＃13;

＆＃13;

h1{
  text-align: center;
  font-family: Arial;
  font-size: 40px;
  color: black;
  line-height: 20px;
}

h1::after {
   content: '...';
   display: block;
   font-family: Georgia, sans-serif;
   font-size: 100px;
   color: #FEC832;
}

＆＃13;

<h1>My Heading</h1>

＆＃13;

＆＃13;

＆＃13;

Answer 5

同样manish-patel的答案，但是......

我喜欢

• 不强制字体大小
• 使用自适应em尺寸单位，而不是固定pt或px。
• K eep 我 t S hort和 S 实施

这将使用UTF-8，黑色圆圈之一：

⦁   U+2981    Z NOTATION SPOT          ⦁
•    U+2022    BULLET                   •
●    U+25CF    BLACK CIRCLE             ●
⚫    U+26AB    MEDIUM BLACK CIRCLE      ⚫
⬤   U+2B24    BLACK LARGE CIRCLE       ⬤

＆＃13;

＆＃13;

h1{
  text-align: center;
  line-height: 1.3em;
}
h1::after{
  content:"⚫ ⚫ ⚫";
  color: gold;
  display: block;
}

＆＃13;

<h1>My Title</h1>

＆＃13;

＆＃13;

＆＃13;

稍微增强：向点添​​加模糊边框

＆＃13;

＆＃13;

h1        { text-align: center; line-height: 1.3em; }
h1::after { content:"⚫ ⚫ ⚫"; color: gold; display: block;
            text-shadow: 0em 0em .12em #530; }

＆＃13;

<h1>My Title</h1>

＆＃13;

＆＃13;

＆＃13;

Answer 6

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

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>

Answer 7

使用flexbox的解决方案：

＆＃13;

＆＃13;

h1 {
  text-align: center;
  font-size: 48px;
  color: black;
  line-height: 24px;
}
h1::after {
    content: "...";
    font-size: 72px;
    color: gold;
    display: flex;
    justify-content: center;
    letter-spacing: 5px
}

＆＃13;

<h1>
  My Heading
</h1>

＆＃13;

＆＃13;

＆＃13;

Answer 8

这是另一种解决方案，与Paulie_D的解决方案相同，但是我将依靠多个径向渐变来创建每个圆圈，而不是阴影/阴影。然后，您可以轻松控制圈子的数量，位置，颜色和尺寸。

根据需要使用3个圆圈

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

h1::after {
  content: "";
  position: absolute;
  width: 1.5em;
  height: .25em;
  background: radial-gradient(circle at center, blue 50%,transparent 51%) 0 -4px/11px 21px no-repeat, 
              radial-gradient(circle at center, orange 50%,transparent 51%) .6em -4px/11px 21px no-repeat,
              radial-gradient(circle at center, green 50%,transparent 51%) 1.2em -4px/11px 21px no-repeat;
  bottom: 0;
  left: 50%;
  margin-bottom: -.5em;
  transform: translateX(-50%);
}

<h1>My Title</h1>

5圈（我们去任何数字）

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

h1::after {
  content: "";
  position: absolute;
  width: 1.5em;
  height: .25em;
  background: radial-gradient(circle at center, blue 50%,transparent 51%) 0 -4px/11px 21px no-repeat, 
              radial-gradient(circle at center, orange 50%,transparent 51%) .3em -4px/11px 21px no-repeat,
              radial-gradient(circle at center, brown 50%,transparent 51%) .6em -4px/11px 21px no-repeat,
              radial-gradient(circle at center, pink 50%,transparent 51%) .9em -4px/11px 21px no-repeat,
              radial-gradient(circle at center, green 50%,transparent 51%) 1.2em -4px/11px 21px no-repeat;
  bottom: 0;
  left: 50%;
  margin-bottom: -.5em;
  transform: translateX(-50%);
}

<h1>My Title</h1>

Answer 9

具有径向梯度css属性的解决方案。

   .horizontal-dots {
        cursor: pointer;
        width: 30px;
        height: 30px;
        background-image: radial-gradient(circle, black, black 3px, transparent 4px, transparent);
        background-size: 10px 25px;
    }

<div class="horizontal-dots">
</div>