Our sidebar of book information would look a lot better if we had colons in the row headers. We can use style sheets to add them. There is a special kind of selector called a “pseudo-element”. This is an element that sort of exists, and we can modify it. Two of these are the before and after pseudo-elements. The “before” pseudo-element is a fake element that appears inside of the element and just before any of the true content of that element. The same for “after” except that it appears just after any of the true content.
We can use the after pseudo-element to put text, such as a colon, into our th elements.
table.bookinfo th:after {
content: ":";
}
We no longer need the vertical orange bars to separate our row headers from our row content, so remove the border properties from our th element’s style so that it reads:
table.bookinfo th {
text-align: right;
}
Note that the colon is bold, just as all of the real content in the “th” element is. Pseudo-elements inherit the styles of the elements they are part of.
Pseudo-elements are specified with a colon between the element name and the pseudo name.
Related Pages
