Do you know there are other ways of using CSS selectors? (Part 3)

In the previous articles we introduced you to CSS selectors, showing you the advantages and modes of use.
Today we round-up the series with two pseudo-elements that allow you to further improve the markup of your HTML documents.

Let’s find out what it’s about.

:Before and :after pseudo-elements

The :before and :after pseudo-elements, combined with the content rule, allow you to add some life to your page: basically they allow you to add text before or after an element using CSS, without having to edit the markup! Not only, it’s possible to show only one attribute of the elements you have selected.

Using these pseudo-elements is similar to the ones we have seen before: all you have to do is place them following any type of selector.

Let’s see an example:

p:before {
    content:"This is where the paragraph begins -> ";
    color: red;
}

p:after {
    content:" <- This is where the paragraph ends";
    color:blue;
}

These two rules show the definite script in the content rule before and after each paragraph. Using the content rule is simple: all you have to do is insert text within quotations, otherwise by using any of the Unicode codes.

You want to see a practical use for these rules?

How to add required fields in a form?

Everyone knows how to comment a blog post. You probably know that some fields on a form are required, while others aren’t: this is made explicit by the use of an asterisk ( * ).

Let’s take a look at a simple form you could find at the end of a blog post:


<h2>Comment this article</h2>

<form action="#" method="post" id="commentform">

    <p><label for="author">Name</label> (Required)
    <input type="text" name="author" id="author" value="" size="22" tabindex="1" /></p>
    <p><label for="email">Email</label> (Required)
    <input type="text" name="email" id="email" value="" size="22" tabindex="2" /></p>
    <p><label for="url">Website</label>
    <input type="text" name="url" id="url" value="" size="22" tabindex="3" /></p>
    <p><textarea name="comment" id="comment" cols="50" rows="10" tabindex="4"></textarea></p>
    <p><input name="submit" type="submit" id="submit" tabindex="5" value="Invia Commento" /></p>

</form>

As you can see, the author has required the first two fields, specifying manually with a text “(Required)”. If the author wanted to make even the third field mandatory, he or she would then have to add the text manually.

Eliminating the presentational text and using the :after pseudo-element you can make the code more efficient and meaningful.

So the markup would become:

<h2>Comment this article</h2>

<form action="#" method="post" id="commentform">

    <p><label for="author">Name</label><input type="text" name="author" id="author" value="" size="22" tabindex="1" /></p>
    <p><label for="email">Email</label><input type="text" name="email" id="email" value="" size="22" tabindex="2" /></p>
    <p><label for="url">Website</label> <input type="text" name="url" id="url" value="" size="22" tabindex="3" /></p>
    <p><textarea name="comment" id="comment" cols="50" rows="10" tabindex="4"></textarea></p>
    <p><input name="submit" type="submit" id="submit" tabindex="5" value="Send comment" /></p>

</form>

while the CSS you need to apply could be:

label[for=author]:after, label[for=email]:after {
    content:" (Required) ";
    color:red;
    font-size:75%;
}

This rule can be read, “Select all the label elements with attribute for equal to ‘author’ and ‘email’, then add the text ‘(Required)’, make it red and lessen its dimensions”. Here you can see an example.

You want to see another practical application for it?

Modifying lists

One request frequently made when developing a website is to be able to edit the way in which elements are rendered on a list. In other words, how to modify the “black ball” which all the browsers render by default.

There are different ways to reach this objective: using the CSS rule list-style-type, or by adding a background image for the <li> elements positioning it adequately, or also by using Javascript.

If you don’t have stylistic preferences, you can consider using this method and add it to your “bag of tricks.” Basically this method consists in eliminating the default style of the lists, and adding -using the :after pseudo-element – a character before each <li> element.

Let’s write a trial markup:

<ul>
    <li>First element in the list</li>
    <li>Another element</li>
    <li>This is the last element</li>
    <li>Just joking, this is the last one seriously</li>
    <li>Oops we forgot to add that the previous one was the next to last one!!</li>
</ul>

Let’s apply what we’ve said before:

ul {
    list-style:none;
}

li:before {
    content:"\2665 020 ";
    color:red;
}

We’ve removed the classic bullet and added a heart before the elements on the list and a space using the respective Unicode codes: thus obtaining the following result.

How do I know where links on a printed page point to?

When a user prints a web page, they find themselves with a problem: how to know where the various links point to.

As you can imagine, on printed paper it’s not possible to find out the links’ destination. Using the :after pseudo-element, it’s possible -using a print-specific stylesheet- to show the link, so that it can be read.

Let’s take this markup as an example:

<p>
    Hello everyone. This is a sample website taken from <a href="http://www.yourinspirationweb.com">Your Inspiration Web</a>.
    Try to search for it on <a href="http://www.google.it">Google</a>.
</p>

A simple paragraph with two links. What we want to create here during the printing phase is to have the link without being underlined, followed by the URL in parentheses. We can use :after and the content rule: this last one allows us to see also the value of an attribute, using the following syntax: attr(attribute_name).

Let’s see how it works:


a[href] {
    text-decoration:none;
}

a[href]:after {
    content: " (" attr(href)  ")";
}

Using attribute selectors we have selected all the <a> elements with attribute href and through the content rule we have inserted the href attribute value after the name of the link.

Try to print the example!

Other articles in our guide:

Maybe you are interested for..

Are you using all of the available css selectors?

Master per Web Designer Freelance
In tutti questi anni abbiamo ricevuto centinaia di richieste di approfondimento sulle numerose tematiche del web design vissuto da freelance. Le abbiamo affrontate volta per volta. Ma ci siamo resi conto che era necessario fare qualcosa di più. Ecco perché è nato One Year Together, un vero e proprio master per web designer freelance che apre finalmente le porte al mondo del lavoro.
Scopri One Year Together »
[pdf]Scarica articolo in PDF[/pdf]
Tags: ,

The Author

Fond of web design, takes delight in creating (X)HTML+CSS layouts. A maniac of polished and tidy codes, the type of person you find in your house straightening the paintings hanging on the wall. He has made his mind of becoming a web designer with a capital “w”, and spends entire nights awake in order to make his dream come true.

Author's web site | Other articles written by

Related Posts

You may be interested in the following articles:

13 comments

  1. Xee.O

Trackback e pingback

  1. Do you know there are other ways of using CSS selectors? (Part 2) | Your Inspiration Web
    [...] Do you know there are other ways of using css selectors? (Part 3) [...]
  2. Do you know there are other ways of using css selectors? (Part 1) | Your Inspiration Web
    [...] Do you know there are other ways of using css selectors? (Part 3) [...]
  3. uberVU - social comments
    Social comments and analytics for this post... This post was mentioned on Twitter by antoscarface: RT @YIW Do you know there …
  4. Do you know there are other ways of using CSS selectors? (Part 3) | Design Newz
    [...] Do you know there are other ways of using CSS selectors? (Part 3) [...]
  5. Do you know there are other ways of using CSS selectors? (Part 3) » blog.lanche86.com
    [...] Do you know there are other ways of using CSS selectors? (Part 3) …
  6. florystyka
    Check this out... Here are some of the sites we recommend for our visitors...

Leave a Reply

Current day month ye@r *