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 ::after
to 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>