Three dots below block element

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>

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>

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>

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>

Three dots below block element

Tags:

Html

Css

Related

Recent Posts