Three dots below block element

Question

I wanted to design something as like below image, but not sure how to do!

Title with three dots

So I wanted to display only 3 dots on center below my title. But when I try with dotted border-bottom it takes entire <h1> tag.

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

<h1>My Title</h1>

Answer 1

Same manish-patel's answer, but

                   ●   ●   ●

As I prefer to

• not force font size
• use adaptive em size unit instead of fixed pt or px.
• Keep It Short and Simple

---

This will use UTF-8, one of black circle:

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

Fist, using BLACK LARGE CIRCLE: ⬤

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

<h1>My Title</h1>

Or with BLACK CIRCLE: ●

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

<h1>My Title</h1>

With a little enhancement: adding blurred border to dots

Mixing both BLACK CIRCLE: ● and BLACK LARGE CIRCLE: ⬤ ;)

h1        { text-align: center; line-height: 1.3em; }
h1::after { content:"●⬤● ●⬤● ●⬤●"; color: blue; display: block;
            text-shadow: 0em 0em .2em #008; }

<h1>My Title</h1>

Answer 2

A Solution with radial-gradient css property.

   .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>

Answer 3

Here is another solution where you can rely on multiple radial-gradient to create each circle. Then you can easily control the number of circles, their position, colors, and size.

3 Circles as needed

h1 {
  text-align: center;
  font-size: 50px;
  color: red;
  padding-bottom:0.3em;
  background: 
    radial-gradient(circle closest-side, blue   98%,transparent 100%) calc(50% - 25px) 100%, 
    radial-gradient(circle closest-side, orange 98%,transparent 100%) 50%              100%,
    radial-gradient(circle closest-side, green  98%,transparent 100%) calc(50% + 25px) 100%;
  background-size:25px 0.3em;
  background-repeat:no-repeat;
}

<h1>My Title</h1>

5 Circles

h1 {
  text-align: center;
  font-size: 50px;
  color: red;
  padding-bottom:0.3em;
  background: 
    radial-gradient(circle closest-side, purple 97%,transparent 100%) calc(50% - 50px) 100%, 
    radial-gradient(circle closest-side, blue   97%,transparent 100%) calc(50% - 25px) 100%, 
    radial-gradient(circle closest-side, orange 97%,transparent 100%) 50%              100%,
    radial-gradient(circle closest-side, green  97%,transparent 100%) calc(50% + 25px) 100%,
    radial-gradient(circle closest-side, red    97%,transparent 100%) calc(50% + 50px) 100%;
  background-size:25px 0.3em;
  background-repeat:no-repeat;
}

<h1>My Title</h1>

Answer 4

Try something as like below snippet. Use spans to create dots and align them center.

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>

Update: Yes of course, i accept that this is not the perfect solution. But same time am sure this will be one of the best solution where you can customize each dots with different color and size in easy way as below snippet. Otherwise i would agree Manish Patel answer is the best one.

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 5

A solution with 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>

Answer 6

One pseudo-element and a multiple drop shadows. (drop or box)

Note: with this method you can control the color of each dot.

Drop Shadow

  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 (thanks to 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 7

Just use the ::after pseudo-selector and define a line-height for your h1 element to vertically space the dots from the title. Use Georgia as web font for the dots as Arial has squared dots.

Remember you can use both syntax but is preferably use the ::afterto distinguish pseudo-classes from pseudo-elements.

/* CSS3 syntax */
::after

/* CSS2 syntax */
:after

CSS3 introduced the ::after notation (with two colons) to distinguish pseudo-classes from pseudo-elements. Browsers also accept :after, introduced in CSS2. Caveats

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>

Answer 8

Used ::after pseudo element for that

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 9

Use ::after pseudo element.

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>