HTML and CSS Reference
In-Depth Information
In this example, the element with the id
example
will have a hash symbol
placed “before” its content, and a period (or full stop) placed “after” its
content.
SOME NOTES ON THE SYNTAX
You could leave the
content
property empty and just treat the pseudo-
element like a content-less box, like this:
#example:before {
content: "";
display: block;
width: 100px;
height: 100px;
}
However, you can't remove the
content
property altogether. If you did, the
pseudo-element wouldn't work. At the very least, the
content
property
needs empty quotes as its value.
You may have noticed that you can also code pseudo-elements using the
double-colon syntax (
::before
and
::after
), which I've discussed
before. The short explanation is that there is no di
"
erence between the two
syntaxes; it's just a way to di
"
erentiate pseudo-elements (double colon) from
pseudo-classes (single colon) in CSS3.
One final point regarding the syntax. Technically, you could implement a
pseudo-element universally, without targeting any element, like this:
:before {
content: "#";
}
While the above is valid, it's pretty useless. The code will insert a hash
symbol before the content in each element in the DOM. Even if you
