CSS3 Selectors: Pseudo-element ::after

This entry is part 39 of 40 in the series CSS3 Selectors

As with the previous example, we can add a text content using ::after.

Another use case for ::after is to insert an attribute of the targeting element.
Here we retrieve the href using attr(href) and insert the href link after the text content.
<!DOCTYPE html>
<head lang='en'>
    <meta charset='UTF-8'>
    <title>Codecrawl.com - HTML5</title>
        a[href^=http]:after {
            content: " (" attr(href) ")";
<a href='http://yahoo.com'>I am going to yahoo!</a>
Series Navigation<< CSS3 Selectors: Pseudo-element ::before
CSS3 Selectors: Negation pseudo-class :not(s) >>

Leave a comment

Leave a Reply