Generated content essentially boils down to two selectors – :before and :after. They are added in pretty much the same way as the :hover state (e.g. .content .button:after) but instead of changing the state of the targeted tag they either prepend or append a pseudo-element to it. You can then apply styles to this pseudo-element as you would to any other element. The only required property for :before and :after is content. This is what the new element should contain. It can be text, a symbol or even an image:

.button:after {content: ‘Hello world!’}

The flexibility of generated content comes from the fact that you can also not enter anything in the content property. For example:

.button:after {content: ‘’}

This allows you to have an element which is purely for presentational use but doesn’t clutter up the HTML.

Symbols on buttons

One of the cooler uses for generated content is to add symbols to buttons. Generated content makes it easy and it means the you can use a background image/CSS gradient and a symbol without adding any additional html markup.

Complex shadows

Another use is for creating complex shadows beneath objects. I recently read this article on how.

Reverse border radius

You can also use generated content to create ‘reverse’ corners for tabs. Like this…

It’s been a little over 6 months since I finished my second year of Multimedia Technology and Design at Brunel University and started working at Ten4 – that’s more than half of my placement. It’s gone really fast…

Way back in June (when my placement began) I was working on the update and redesign of parts of our custom CMS (content management system). Pretty soon I was making systemic changes like making actions clearer and form fields more visually appealing – these decisions now affect the user experience of numerous clients using the system.

After Andy (last year’s placement student) left I was suddenly working on real projects for real clients. Within a month I was working on the front-end development for Will Young’s new site. It’s great to work on this sort of project – the level of trust and the scope of the role I play in the company are some of the things that make Ten4 such a good employer (particularly for a placement).

Recently I took the initial homepage design for Fearne Cotton’s site, designed interior pages, developed it and completed the first stage of the CMS integration. I’ve also completed the front-end development of a shiny new JavaScript-enhanced voting process for the National Television Awards.

Working on high-profile projects is great but sometimes it’s the smaller projects that I get the most out of. With these I can take a more client facing role and deal with the project as a whole (design, front-end development and CMS integration as required). Interacting with clients like this isn’t something I’d really done in this context before and it’s interesting to see the whole process – another advantage of working in a small team.

I’ve also learnt a lot about front-end development in my time here so far. Looking back at the code I wrote pre-Ten4 is certainly interesting – without the things I now know about accessibility, SEO and browser compatibility my work was certainly a lot worse!

IMAGE HERE

Much of my current JavaScript knowledge comes from the opportunities I’ve had to work on side projects when there isn’t much front-end development work to do. One of my side projects is Tea Roulette, a simple little app that helps us choose who’s making tea in the office.

Knowing how to add value to sites using JavaScript is increasingly important in the ‘post-Flash’ world because of how frequently it’s used. It’s an extremely useful skill which I know I’ll use extensively after Ten4.

Without a doubt the best thing about working at Ten4 is the fact that I’m truly treated as part of the team, like any other employee. I could tell you a dozen horror stories about other students in my field who are on so-called ‘placements’ but mine is so different from theirs – I get the opportunity to work on real projects with real clients and extend my skill-set in pretty much whatever way I choose. That’s how a placement should be.

It’s been incredible so far and I look forward to the next 6 months!