I’ve used this in the past to put asterisks on required form element labels. In this place, it makes perfect sense, the asterisk isn’t content, it’s there as a visual clue.
However, in other uses, is it bad practice? I have a series of pages with thumbnail images. The client wanted to add a hint: “Click on thumbnails for larger images”.
I can either edit the HTML for a few pages to include an extra element or I can do it with one file change:
.thumbs:after {content:'Click on thumbnails for larger images';}
My question is, is doing this a bad idea? I’m on the fence, it makes sense that for every set of thumbs it’s a visual clue but it does feel odd inserting content via CSS.
:after should be used in the same way that you would use decorative images in that should it be missing then there would be no loss of function.
If you are supplying important instructions then that should really be in the html. If on the other hand it is just an enhancement that will not cause a problem if missing then :after is fine.
You will need to decide whether clicking the image is important to you or to your users and then make the right choice. If you want users to click the images then I guess it is important enough to be in the html.
I would think that asterisks for required fields in forms is also important content and I would use html rather than :after
In the end it’s a decision you have to make for yourself depending on how important you feel that action is.
Paul explained it nearly perfectly ( so what’s new).
A good test for when this is appropriate is look at your page naked ( that is the page is naked not you). Looks aside, does your page make sense/work with CSS turned off. If it does then you are fine, if you are hunting around for your info or have problems navigating… then perhaps some of those style elements should be part of the content!
In this case I would consider taking a page from a programing technique called: DRY. Dont Repeat Yourself. Since the ‘hint’ is neither actual content nor UNIQUE to a specific element it would seem that a rule that repeatedly adds the desired text seems apropos.
A note, if you are considering screen reader users too, know that some (like VoiceOver) read out CSS-generated content, while most others (the big names like JAWS and Window-Eyes) do not. This falls under Paul’s test for “does it belong in HTML or not”, but with the additional burden of “will this confuse someone if they hear it?” (this would be cases where you’re repeating something hidden with CSS-generated content, which isn’t happening in this particular case).
Another solution is to use the title attribute to set the tooltip text if you can.
You could then use the title attribute to set your :after element content, something like this:
HTML
<a class="thumbnail" title="Click on thumbnails for larger images"><img src="thumbnail.jpg" /></a>
The best part of this is that you keep the information in the title attribute (which is actually a relevant place for such information), so it will be available to the user regardless of browser features.
Edit:
Seems I was in too much of a hurry when reading your post, I think I got your problem wrong. Anyways, maybe this will help somehow.
Well, no, not at all. Title attributes are broken and have been from the beginning, which is the fault of browser vendors. All of them, with sometimes the exception of Opera. You’re idea would really be nice if browsers did allow all users of all devices access to titles.
The only users who have access to that title attribute are those using a mouse (by this I’m referring to your default/fallback, not your CSS). Touch-screen users might get access when Microsoft’s Pointer Events get going at the W3C, maybe. Keyboard users, whether sighted or blind or in between, as well as users of speech-to-text like Dragon, will never know the (usual) title attribute since there’s no way to activate it.
And again also many screen readers and other AT don’t read those out (I think they should, and I think the vendors agree since slowly more and more are doing it).
Actually, looking at TomB’s post again, I would personally like that instructional text near the heading that heads the thumbnails; that is, above all of them, once. Another problem with the content being in the CSS is when you need translation. For example if you’re using templates with {% trans %} tags. We have this problem currently when we have a handful of text bits that get added by Javascript, meaning they’re not in the templates. We get a separate Javascipt to go through the page after these bits have been added and transform them to whichever language we’re using, but it’s definitely a kludge.
