as design elements
This site is practically built on pseudo elements – generated content, so I should have written an article about the many uses of these design elements a long time ago. Better late than never though.
Once the basic container elements are in place, there should be no reasons to
HTML template to accommodate initial design and later
modifications. All design details that can't be styled directly into the
HTML template, can be added via
CSS pseudo elements.
My template does for instance not have an
but that hasn't prevented me from adding “full header styling”.
Containers are pushed down to make space, and the visual and functional header
carefully designed into that space with
All birds and most other elements above the headline, are
::after attached to
various permanent elements down the page. This provides me with many more
attachment points than those that are in or near the header area.
Each of these pseudo elements consists of a visible or invisible foreground, plus one, two, three or more images as background. Shapes, shades and background sizes for each pseudo element, complete the picture.
CSS values take over at the page-wide
mediaquery breakpoints, making it possible to tune the picture for
various window sizes. Functional elements and links are then pulled up from
various places in the source code, absolute positioned in the header area and
styled to go with the rest.
There are some normal backgrounds on regular containers in the area, but overall it is pretty much a “pseudo header”. This very flexible and responsive header is extremely easy to alter both visually and functionally, something I have done many times since this site was launched in early 2011.
I have used generated content literally everywhere, both for overall page design and for “automated” visuals in content areas.
Being able to add such design details both as foreground and background in
generated content, makes it an extremely efficient part of designing with
CSS. Especially so since foreground and background can be
manipulated as if they (almost) were on separate elements.
link styling (1)
The humble link in middle of text can be given flags and icons using
generated content. For instance the “external link” flag at the end
of this link to W3C: CSS3
::before and ::after, a non-essential but nice-to-have visual
detail automatically inserted where appropriate, by probing the link-address
href ) itself.
Now, here and there I may want generated content to carry
text, and, of course, nothing is easier than that – just write it as
content and it will show up.
In the rare cases when the
content text is not supposed to show
up but the
content background must, we have several options.
text-indent for such cases, as pulling not too long
text lines say 20000px to the left (in
designs) is usually plenty enough to make it stay off screen.
See examples of how to code, in Addendum.
link styling (2)
Link repetitions – having several links in succession pointing to the same address, is bad practice. It is also totally unnecessary.
A regular link can be made to cover an entire block of text and pictures,
simply by attaching a pseudo element to the link, and absolute position
that transparent, “fake”, element at full
height on top of the block. Typical example is found on my little blog ToC page, where the first block,
presenting the first lines in my latest posting, has become a very large
Systematic link-layering (
z-index ) of the generated content
and eventual other links in the text, lets the “Read more” link at
the bottom-left cover the entire block of text without blocking out other
links. This is achieved by selecting the “Read more” link as
last-of-type in the block, and layer it lower than other links but
higher than all else.
The tiny picture at the bottom-right of that blog Table of Contents block
– shown here, is generated content
background positioned so
it won't cover text in any case. For other sections on site, the “blog
oriented” image is replaced by a suitable one, or left out.
Note that IE up to IE10 chokes on
the transparent overlay. The link cover becomes unstable if there is no
background image there. To fix IE: use
.png as part of the
To make it perfectly clear what the
:hover effect points to
– especially important when there are other links in the paragraph,
I added an arrow image that pops up on
:hover and points at
the actual “Read more” link. This arrow image is also added as
generated content background.
The following screenshot from another article on site, shows the
link overlay in another context…
As can be seen, the pointer can
:hover anywhere inside the border,
and the arrow image will replace any “external link”
flag and point at the link that will be followed when you
See examples of how to code the basics, in Addendum.
Will mention that alternative ways to cover an area with one
CSS alone, have existed for a long time.
I should know…
link styling (3)
Further down in the same little blog ToC page you see icons added at the end
of some links in the archive list – for instance a camera for posts
with many pictures. These icons are also generated content backgrounds, added to
links that have one of a small number of
classes set on the
I attach the generated content icon to the link itself – not to the list-item, because I want the icon to be a clickable part of the link.
In preparation for cases where such an icon should be attached to an external
link in a list, I use
::before for the icon and
::after for the “external link” flag so they can
(Could have used multiple backgrounds on one pseudo element to achieve this.)
Examples of how that all works together, can be seen on my links to Selected Sites page.
Content dividers can either be background images added directly to elements – at a space created by padding above and/or below the text, or they can be added as background to generated content attached to elements.
In both cases I add
classes to the elements I want
dividers attached to, as no other method or system would add the exact dividers
I want exactly where I want them in the text down a column.
The divider above is generated content attached to this paragraph. The divider below is background image on this paragraph. Although I rarely ever want two dividers on the same element, it is easy to achieve with any of the methods described.
As we can add more than one background image to an element – also to generated content, we can play with both methods for adding dividers and whatnot to our hearts delight. I haven't done much out of content dividers on this site yet, but tests show that there are very few limitations for what we can mix together and present in latest browser versions.
One thing we cannot do is to attach generated content to images – it is against the CSS rules they say. Usually this is not much of a limitation, as we can in many cases simply borrow the attach-point from an element that follows our image in the source code.
The “faux button” below should act as a real button with
:active (click) effects, and it should also
display messages as response to these actions. Now, despite it being an image,
my “faux button” does just that.
In this case I am borrowing attach-point from this paragraph, providing
a space to put the generated content messages to display on. It can of
course be any element that accepts generated content attachment, and if there
isn't one readily available one can always insert an empty
width and zero
height immediately after the
See very detailed example of how to code it, in Addendum.
the big generated content example
Those who wonder how big a generated content “element” can be, and what it can be used for, should look at this very page a few more times – on wide enough screens to see the side column.
That's right: the side column's visual background is one big piece of
automatically sized and precisely positioned pseudo element, styled up with
box-shadows and all necessary.
The actual side column with text and all other content, is floated out from underneath the main column and layered on top of this generated content “faux column”. Together they create the illusion of a full-height side column, no matter how much or little content there is in it.
The actual side column ends about
40px below the decorative
branch, to make space for the cat image at the bottom of the side column. The
cat image is also generated content floated up from the footer, so it isn't
really part of the side column. Just another illusion, as there are so many of
on this site.
we've only just begun
The good thing about generated content is that the illusions they create are
as real and stable as all other visual design effects we have at our disposal,
in all browsers from IE8 up. Thus, pseudo elements are very good
alternatives to the widely used practice of adding non-structural
HTML elements as “style hooks” for visual
Combined with the use of multiple background images – supported by all
browsers from IE9, we can visually style our designs to our hearts'
delight. And, we can do so without compromising on the quality of our
From there we can start asking for more
CSS tools to enhance our visual and structural designs with. No
point in quitting while we are ahead.
18.mar.2014 - added "faux button" + code in addendum.
20.mar.2014 - rearranged article.
21.mar.2014 - minor revisions.
01.apr.2014 - "link styling(2)": added note about IE bug.
16.sep.2016 - light update now that IE8 is left out.
last rev: 16.sep.2016