This is to demonstrate the use(s) of the
::before and ::after commands.
You need to set up the value of the ::before & ::after elements by Using
the command content:. I will be setting mine to
(::before) content:"
<<<"
(::after) content:">>>"
It affects your objects 'content' area - so it will include what
you add as your content: field (<<<) & (>>>) to the beginning of the CONTENT area
and not before and after the MARGIN or PADDING sections
On this page I told it to use ::before and ::after on EVERY <p> element
NOTE...
When you RIGHT+CLICK on a web page and choose the INSPECT option
you will see ::before on its own line EVERYWHERE that the ::before is being used.
The same applies to the ::after command.
To do this, in the <style> section at the top of my page I created...
p::before {
content: "
<<<";
background-color:yellow;
font-size:1.5em;
}
p::after {
content: ">>>";
background-color:yellow;
font-size:1.5em;
}