HTML and CSS Reference
In-Depth Information
::marker
Pseudo-element
CSS3 added a handy pseudo-element to access the list marker, both
defining and providing a way to change the styles and positioning of the
marker that isn't available through shifting or padding on the list item
or wrapping the content of a list item in another element, allowing inde-
pendent control of properties such as
color
and
font-size
:
<li><span>list content</span></li>
Unfortunately, at the time of this writing, there isn't a browser that
supports
::marker
. Combined with counters and generated content,
which are discussed in the next section, this will be a powerful way to
generate custom markers for content.
As is the case with list markers, it can sometimes be desirable to display
content that doesn't come from the HTML document. Generated content
is defined with the
content
property and then added to the document as
the content of the pseudo-elements
::before
and
::after
(and, eventu-
ally,
::marker
).
content
The
content
property allows for a number of different types of content
that may be added to the selected pseudo-element, including the
following:
■
<string>
: Text content for inserting into the element
■
<url>
: A URI of an image
■
none
: No content is defined
