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.

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

side notes.

what we can't see may hurt us

When it comes to “nice and useful visual additions”, what is often overlooked is that our visual additions may leave “not so very nice and useful non-visual trails” that may be picked up by screen readers and other AT software.

Such illogical behavior may be considered bugs, or flaws, in the relevant software, but it is nevertheless causing real problems for users of this software.

I have overlooked such things myself, and have had to go back and fix my code later when friends have pointed them out to me. This happens because I can't check all non-visual effects, and trust that purely visual effects are just that … purely visual.

Seemingly, those who wrote HTML and CSS rules, did not get everything right to begin with. Neither did those who develop browsers and AT software. This has in turn lead to several layers of “good coding practices” and special code – see aria-* attributes and so on, in an attempt to work around a whole set of earlier blunders, overlooked issues, and missed opportunities.

Problem is of course that factors like “good coding practices” and special code, are overlooked and/or totally lost on many front-end coders and their employers.

Even those of us who know about these things, may get it wrong at times. That is mainly because we can't always test the outcome, but also because what is written about it can be both hard to find and difficult to interpret.

some accessible info:

same with all images

Not meant as an excuse for not trying to get it right for all parties, but in most cases “overdoing” is worse than leaving things alone. No action usually trumps ignorant actions.

This is especially true when one doesn't know, or doesn't care about, what the “best” solution actually would be in each case. This can for instance be observed in how images' alt attributes are populated.

As example: the front page for the Royal House of Norway…
…where they are duplicating what is written alongside an image, into the image's alt attribute – i.e. doubling up the text.
I am using that particular site as example because I know they have been messing up these things for a long time. No “good coding practices” behind that site, but such bad coding practices are quite normal in web design.
(The people behind that site should have applied an improved link styling too, instead of repeating the same links 3 times in succession.)

In addition to those who don't know or don't care, some apparently only see alt, title and other attributes and less visible elements as useful places to stuff SEO content in. Definitely not a good reason, and one that can backfire.

Adding text in images' alt attributes without knowing the outcome, is plain wrong and can easily cause confusion.

The alternative text in/for images are meant to bridge the gap when images are missing, it should not be used to describe the image itself, or to add other irrelevant information. If there is no apparent gap to bridge with images missing, there should also not be any alternative text in/for missing images.

We can all turn off images in browsers, and see if anything is missing or weird in context without images. I use Lynx for checking, as this “text only” browser cover this and many other important control tasks in web design, in one go. See Addendum for more information.

Empty alt attributes work perfectly fine – images becomes “noiseless”. Leaving out the alt attributes altogether does not work so well – the image becomes “very noisy” as software at the user end tries to interpret what it means.

Browsers and AT software aren't intelligent enough to interpret images and their function in context – at least not yet, so we have to tell them what to do and not do by keeping those alt attributes in place and use them wisely.

I add alternative text to images only when it serves its purpose by bridging gaps caused by missing images. In all other cases I leave the alt attributes totally empty, and in place.

I wrote down my thoughts on the issue years ago, and have the same view today.

potential problems

Those who wrote and implemented the pseudo element part of CSS, didn't include a method to add alt attributes – with or without text – to images served as generated content. They may of course add that functionality to pseudo elements one day, but I have a feeling we won't see it in the foreseeable future.

Thus, we are ourselves left with fixing the problems missing attributes for ::before and ::after may cause. Problems may only occur in some “obscure” AT software, but they are still worth fixing and it is reasonably easy to do.

In general I prefer to leave problems and flaws in browsers and/or AT software alone – leave to those who caused them to fix. I may minimize problems at my end though, as long as that doesn't cause new problems.

As examples in this page shows – see code in Addendum, my solution for “avoiding noise” with generated content, is to serve images as background to “silent” content added to text-containing elements.

I add images both as foreground ( content ) and background when I use generated content to add pure visuals to general containers – decoration on block elements that group and carry text-containing elements. I can do this because no AT software reads generated content on outer containers, so no “additional noise” is created in such cases.

scratching the surface

I have only scratched the surface when it comes to exploiting existing support for ::before and ::after. That's alright, as there must be something worthwhile studying tomorrow also.

I have a few ideas that rely on how generated content works in today's browsers, and will continue to test visual and functional applications on this site.

For what it is worth: the basic generated content methods described here will work in all browsers back to IE8, when using the old :before / :after form.

notes to self:

Have a few generated content details on site that I literally have forgotten how I implemented. Have to go through stylesheets and isolate and make notes about those.

There are also a few non-optimal generated content implementations from early on on site, that I have to remember to fix. They may not disturb anyone, but then again they might.

As I am frequently updating and modifying site-wide styles, I must remember to update articles describing same site-wide techniques – like this very article is. I prefer updated articles over obsolete and archived ones…