On hover, new green text should appear on left
On hover, new green text should appear on right.
On hover, new green text should appear left and right.
The above three have very simple mark up in the html, respectively:
<p class="one">On hover, new green text should appear on left</p> <p class="two">On hover, new green text should appear on right.</p> <p class="one two">On hover, green red text should appear left and right.</p>
The relevant CSS is just:
.one:hover:before {
content: "(hover-text) ";
color: #c00;
background: #fff;
}
.two:hover:after {
content: " (hover-text)";
color: #c00;
background: #fff;
}
Take one of the examples above:
On hover, new green text should appear left and right.
One can only imagine the abstract markup for it that 'applies' on the hovering when the new inline pseudo element is created on hovering, sort of virtual mark-up for when the circumstance of hovering actually takes place. It might look like this (do not look at the markup of the following, it is just an abstract representation), ghostly grey is used for pseudo element opening and closing tags:
The CSS is as stated above, it applies to the :before and :after element once this element is created by the hovering action. And it does this because it is styled to do so on the pseudo class of :hover. Here CSS has a way of creating a sort of element and content for it as well, and familiar styling for colouring etc.