Pseudo Elements

A CSS pseudo-element is used to style specified parts of an element.

The syntax for using a pseudo element is shown below:

selector::pseudo-element 
{
   property:value;
}

Note that we use a double :: to specify a pseudo element.

::after

This will place content after an element. The css 'content' property is used to hold the content that will be displayed after the element.

Example of an ::after style (Run Example Code)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            p::after
            {
                content: "This content is appended.";
                color: red;
            }
        </style>
    </head>

    <body>
        <p>Original text</p>
    </body>
</html>

Note that the 'content' property is only ever used with the ::after and ::before pseudo elements.

Note that CSS is meant for adding presentation and not content. Therefore, the content property should be used with caution.

Write code to place a 'Special Offer' text over any image that has been assigned a user defined special_offer class, as shown here. Hint: The images should be placed inside divs, so that the content of ::after can be positioned.

::before

This will place content before an element.

The ::before tag is used to place the word 'Exercises' in front of this question. Write code to do this.

::first-letter

This will apply to the first letter within an element.

Example of a ::first-letter style (Run Example Code)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
p::first-letter
{
   font-size:30px;
   color   : red;
}
</style>
</head>

<body>
<p>Original text</p>
</body>
</html>

::first-line

This will apply to the first line within an element.

Example of a ::first-line style (Run Example Code)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
p::first-line
{
   font-size:30px;
   color   : red;
}
</style>
</head>

<body>
<p>DkIT is holding a Course information Morning for Prospective Students on Saturday 17th January 2015 (10am - 1pm). This is an opportunity for prospective students to find out more information on courses in DkIT as well as getting help and assistance with filling in their CAO application form. Information will also be available on our Disability Access Route, Mature Student Access Route and the various Support Services that are available.</p>
</body>
</html>

::selection

The ::selection CSS pseudo-element applies rules to the portion of a document that has been highlighted with the mouse.

::selection can only be used to set the color, background, background-color and text-shadow properties.

Example of a ::selection style (Run Example Code)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
p::selection
{
   background-color: green;
   color   : red;
}
</style>
</head>

<body>
<p>DkIT is holding a Course information Morning for Prospective Students on Saturday 17th January 2015 (10am - 1pm). This is an opportunity for prospective students to find out more information on courses in DkIT as well as getting help and assistance with filling in their CAO application form. Information will also be available on our Disability Access Route, Mature Student Access Route and the various Support Services that are available.</p>
</body>
</html>