Generated Content - Beginning CSS3 - page 358

Figure 15-19. The ::before pseudo-element is a circle partially tucked behind its parent
Use the ::after pseudo-element to position alongside it a slightly smaller circle of a different color,
as shown in Figure 15-20 .
Figure 15-20. The circle in the ::after pseudo-element overlaps the first one
Finally, change the color of the shape in the ::after pseudo-element to match the page's background
color—and you have a speech bubble, as shown in Figure 15-21 .
Figure 15-21. The second circle is the same color as the page and masks the first one
The styles for the two pseudo-elements in speech_bubble.html look like this:
#quote::before, #quote::after {
content: '';
position: absolute;
border-radius: 50%;
z-index: -1;
}
#quote::before {
background-color: #0CF;
height: 70px;
width: 70px;