HTML and CSS Reference
In-Depth Information
bottom: -30px;
left: 60px;
}
#quote::after {
background-color: #FFF;
height: 60px;
width: 60px;
bottom: -45px;
left: 45px;
}
Summary
Generated content with the ::before and ::after pseudo-elements has a wide range of uses. As well as creating
labels for common elements, you can ensure the typographic integrity of nested quotes, and generate complex
numbered sequences. But it's important to remember that the generated content does not become part of the
underlying HTML, so it remains inaccessible to older browsers. Don't use it for vital content. In this chapter, you
also saw several examples of how generated content can be used for attractive visual effects, such as ribbons and
speech bubbles.
In the next chapter, we'll look at how to create styles that ensure your pages look good when printed out. The
techniques used in the next chapter also lay the foundations for creating responsive web designs that adapt to a
variety of devices ranging from mobile phones to desktop computers.
 
Search WWH ::




Custom Search