Highlighting text
Text can be highlighted (its background color being set to a light yellow) by applying the mark
class or placing text within the mark
tag (take a look at Figure 8.7):
<mark> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </mark>
Figure 8.7: Highlighting text using the mark class
As with almost all the utility classes discussed here, the mark class itself is extremely simple and consists of only two rules. The first rule adjusts the padding to 0.2rem, while the second sets the background color of the element to #fcf8e3
.