Pseudoelements are things you add before or after an element that can be styled, but aren't part of the markup and can't be touched by Javascript. They're useful for icons and symbols, or adding an extra clearing element.
Here's how you write them.
.stuff:before {
content: "this will be inserted before stuff";
background: green;
}
Typically the content is a character or "", but it could be longer text.
For this example, use this HTML. Obviously, you can't just add a * and an "x" to your markup. That's cheating.
<button class="close">Close</button>
<p class="footnote">Read the fine print.</p>
Sometimes pseudoelements take some finessing to lay them out correctly relative to the rest of the content.
position, margin, line-height and vertical-align are usually good things to try fiddling with.