generated content

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 modify the 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 HTML header, 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 CSS alone.

All birds and most other elements above the headline, are absolute positioned ::before and ::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.

Different 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. I prefer text-indent for such cases, as pulling not too long text lines say 20000px to the left (in LTR 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 width and 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 “Read more” link.

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 a transparent .png as part of the background.

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 “click”.

See examples of how to code the basics, in Addendum.

Will mention that alternative ways to cover an area with one link using 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 appropriate list-items.

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 co-exist.
(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.

visual dividers

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.

borrowing attach-points

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 :hover and :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.

faux button

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 div with 100% width and zero height immediately after the image.

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 enhancement.

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 HTML templates.

From there we can start asking for more HTML and CSS tools to enhance our visual and structural designs with. No point in quitting while we are ahead.

sincerely  georg; sign

Hageland 16.mar.2014
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 advice upgrade advice upgrade navigation