Using Pseudo-elements to Prepend the Date to your Edits
HTML5 introduced a whole army of new elements and attributes designed to add a greater sense of semantic value to our markup. One of these additions, which has proved very popular and has been widely adopted, is the datetime attribute.
As you’ve probably noticed, this is most commonly found on the <time> element, another HTML5 newcomer, providing a date and time (the latter is optional) in a machine readable format and subsequently allowing the content of your <time> element to take any format you want it to. You will need the expertise of a result driven SEO services company to get this through seamlessly.
For example, if your <time> element doesn’t have a datetime attribute, then it should look something like this…
<time>2013-08-15</time>
However, by shifting this data to a datetime attribute, you’re free to present something a bit more human friendly.
<time datetime="2013-08-15">The 15th of August, 2013</time>
Pretty simple stuff.
But that’s not the only occurrence in which the datetime attribute is applicable. Another handy use-case is to keep track of your edits when modifying the content of your web pages, particularly useful for those of us who run blogs that require occasional maintenance.
Using datetime on the ins and del elements
The ins and del elements allow you to make changes to your content where there is benefit in highlighting an addition or deletion.
It’s also often beneficial for the user to understand when these changes were made, which leads me to think that we may as well make use of this metadata that we apply to these elements when appropriate.
But how do we make use of it?
Pseudo-elements to the Rescue
You’re probably aware that pseudo-elements can be used to generate content that can be prepended or appended to an element. However, what’s slightly less mainstream is the attr() function, which allows you to extract the values of an HTML attribute for use directly in your stylesheet!
You know where I’m going with this…
So let’s set the scene with some edited content.
<p><del datetime="2013-08-15">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet dolor laoreet, varius massa dapibus, porttitor tortor. Mauris sagittis, nisi non imperdiet porttitor, sem massa ullamcorper sapien, dictum dignissim lacus ligula eget urna.</del></p>
<p><ins datetime="2013-08-15">Actually, what I meant to say was pellentesque commodo erat quis sapien consequat, eu molestie est molestie. Pellentesque ornare pharetra metus sit amet posuere. Nullam volutpat, velit eu mollis consectetur, elit eros tristique lacus, id iaculis metus dui nec dui.</ins></p>
That’s all good, but as it stands, the user has no way of knowing when the content was altered (unless they inspect the code of course).
This is where you can use the :before pseudo-element in conjunction with the attr() function to prepend the datetime value to your edited content, as shown in the following snippet.
ins:before,
del:before {
content: attr(datetime);
}
In basic terms that’s all you need, but in reality, you want to do a little more than that. The following snippet, which is actually taken directly from this blog’s stylesheet, demonstrates a more rounded solution.
del:before,
ins:before {
content: "(Deleted "attr(datetime)")";
margin-right: 5px;
display: inline-block;
text-transform: uppercase;
}
ins:before {
content: "(Added "attr(datetime)")";
}
And this code will output the following result…
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet dolor laoreet, varius massa dapibus, porttitor tortor. Mauris sagittis, nisi non imperdiet porttitor, sem massa ullamcorper sapien, dictum dignissim lacus ligula eget urna.
Actually, what I meant to say was pellentesque commodo erat quis sapien consequat, eu molestie est molestie. Pellentesque ornare pharetra metus sit amet posuere. Nullam volutpat, velit eu mollis consectetur, elit eros tristique lacus, id iaculis metus dui nec dui.
A Final Caveat
You’ll recall that at the top of this article I claimed that the datetime attribute is designed for machines, not humans. This is true. And it becomes even more apparent when you want to add a time as well as the date, as you must then specify the time zone (this is actually required).
It is based on the UTC time standard, so your time zone is declared in relation to this. For example, as I’m currently based in New Zealand which is 11 hours ahead of UTC time, I would need to do the following:
<ins datetime="2013-08-15T23:24+11:00">Some inserted content</ins>
As you can see, this is more data rich but is evidently somewhat less easy on the human eye.
In summary, perhaps steer clear of this technique when you want to specify a date and a time value. When you don’t wish to be that specific though, this technique is a very valid one and a solution that I’ll be using on this very blog.
About Stephen Greig
Stephen Greig is a 25 year old Freelance Web Designer/Front-end guy, currently living in Nottingham, UK. Stephen is also the creator of messivsronaldo.net and author of CSS3 Pushing the Limits, a book on advanced CSS3. You should follow him on Twitter where he talks about the web, sports, music and swears a lot. Stephen's also on Google+ if that's more your bag.
