Три точки ниже элемента блока

Я хотел создать что-то вроде изображения ниже, но не знаю, как это сделать!

Заголовок с тремя точками

Итак, я хотел отображать только 3 точки в центре ниже моего названия. Но когда я пытаюсь использовать dotted border-bottom, он принимает целые теги <h1>.

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

<h1>My Title</h1>

Ответы

Ответ 1

Попробуйте что-нибудь подобное ниже фрагмента. Используйте промежутки для создания точек и выравнивания их центра.

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>

Ответ 2

Используемый псевдо-элемент ::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>

Ответ 3

Один псевдоэлемент и многократные тени. (drop или box)

Примечание: с помощью этого метода вы можете управлять цветом каждой точки.

Тень падения

  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>

Ответ 4

Используйте ::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>

Ответ 5

Просто используйте псевдо-селектор :: после и определите line-height для вашего элемента h1, чтобы вертикально помещать точки из заголовка. Используйте Грузия как веб-шрифт для точек, поскольку Arial имеет квадратные точки.

Помните, что вы можете использовать оба синтаксиса, но предпочтительно использовать ::after, чтобы различать псевдоклассы из псевдоэлементов.

/* CSS3 syntax */
::after

/* CSS2 syntax */
:after

CSS3 внедрил:: после записи (с двумя двоеточиями), чтобы отличить псевдоклассы из псевдоэлементов. Браузеры также принимают: после, введенный в CSS2. Предостережения

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

<h1>My Heading</h1>

Ответ 6

Тот же manish-patel ответ, но...

Как я предпочитаю

не форсировать размер шрифта
используйте адаптивный блок em вместо фиксированного pt или px.
K eep I t S hort и S imple

Это будет использовать UTF-8, один из черного круга:

&#10625;   U+2981    Z NOTATION SPOT          ⦁
&#8226;    U+2022    BULLET                   •
&#9679;    U+25CF    BLACK CIRCLE             ●
&#9899;    U+26AB    MEDIUM BLACK CIRCLE      ⚫
&#11044;   U+2B24    BLACK LARGE CIRCLE       ⬤

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

<h1>My Title</h1>

Ответ 7

Решение с flexbox:

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
}

<h1>
  My Heading
</h1>

Ответ 8

Вот еще одно решение так же, как решение Paulie_D, но вместо drop-sadow/box-shadow я буду полагаться на нескольких радиальных градиентах для создания каждого круга. Затем вы можете легко контролировать число кругов, их позицию, цвета и размер

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>

Ответ 9

вы должны использовать float:left и добавить некоторый запас с помощью margin-left и margin-right.

#points{
float:left;
background-color: red;
border-radius: 16px;
height: 16px;
width: 16px;
margin-left: 8px;
margin-right: 8px;
}

<div id="points"></div>
<div id="points"></div>
<div id="points"></div>