Scribd
Upload
10 views7 pages

CSS PseudoElement

Uploaded by

Ishita Patil
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
10 views7 pages

CSS PseudoElement

Uploaded by

Ishita Patil
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 7

CSS Pseudo-elements

A pseudo-class can be defined as a keyword which is combined to a selector


that defines the special state of the selected elements. Unlike the pseudo-
classes, the pseudo-elements are used to style the specific part of an
element, whereas the pseudo-classes are used to style the element.
As an example, a pseudo-element can be used to style the first letter or the
first line of an element. The pseudo-elements can also be used to insert the
content after or before an element.

Syntax
Pseudo-element has a simple syntax which is given as follows:
• selector::pseudo-element {
• property: value;
• }

We have used the double colon notation (::pseudo-element) in the


syntax. In CSS3, the double colon replaced the single colon notation for
pseudo-elements. It was an attempt from W3C to differentiate between the
pseudo-elements and pseudo-classes. So, it is recommended to use double
colon notation (::pseudo-element) instead of using single-colon
notation (:).
In CSS1 and CSS2, there is the use of a single colon (:) syntax for both
pseudo-elements and pseudo-classes. The single colon syntax is valid for
pseudo-elements in CSS1 and CSS2 for backward compatibility.
Although there are several CSS pseudo-elements, we are discussing some of
the most commonly used. The widely used CSS pseudo-elements are
tabulated as follows:
pseudo-element Description
::first-letter (:first- It selects the first letter of the text.
letter)
::first-line (:first-line)It styles the first line of the text.
::before (:before) It is used to add something before the element's content.
::after (:after) It is used to add something after the element's content.
::selection It is used to select the area of an element that is selected b
the user.
Let's discuss the above pseudo-elements, along with an example.

The ::first-letter pseudo-element


As its name implies, it affects the first letter of the text. It can be applied
only to block-level elements. Instead of supporting all CSS properties, it
supports some of the CSS properties that are given below.

• Color properties (such as color)


• Font properties (such as font-style, font-family, font-size, font-
color, and many more).

• Margin properties (such as margin-top, margin-right, margin-


bottom, and margin-left).

• Border properties (like border-top, border-right, border-bottom,


border-left, border-color, border-width, and many more).

• Padding properties (such as padding-top, padding-right, padding-


bottom, and padding-left).

• Background properties (such as background-color, background-


repeat, background-image, and background-position).

• Text related properties (such as text-shadow, text-transform,


text-decoration, etc.).

• Other properties are vertical-align (only when the float is


'none') word-spacing, line-height, line-spacing, etc.

Example
• <html>
• <head>
• <style>
• body{
• text-align: center;
• }
• h1::first-letter {
• font-family: Lucida Calligraphy;
• font-size: 3cm;
• color: red;
• text-shadow: 5px 8px 9px green;
• }
• h1{
• color: blue;
• }
• </style>
• </head>
• <body>
• <h1> Welcome to seven mentore </h1>
• <h2> This is an example of ::first-letter pseudo-element. </h2>
• </body>
• </html>

Output

The ::first-line pseudo-element


It is similar to the ::first-letter pseudo-element, but it affects the entire line.
It adds the special effects to the first line of the text. It supports the following
CSS properties:

• Color properties (such as color)

• Font properties (such as font-style, font-family, font-size, font-


color, and many more).

• Background properties (such as background-color, background-


repeat, background-image, and background-position).

• Other properties are word-spacing, letter-spacing, line-height,


vertical-align, text-transform, text-decoration.

Example
In this example we will see the use of ::first-line element to add special
effects to the element's first line.
• <html>
• <head>
• <style>
• body{
• text-align: center;
• }
• h1::first-line {
• font-family: Lucida Calligraphy;
• font-size: 1cm;
• color: red;
• text-shadow: 5px 8px 9px green;
• }
• </style>
• </head>
• <body>
• <h1> Welcome to the javaTpoint.com. This site is developed so that
students may learn computer science related technologies easily. The j
avaTpoint.com is committed to provide easy and in-depth tutorials on v
arious technologies. </h1>
• <h2> This is an example of ::first-line pseudo-element. </h2>
• </body>
• </html>

Output

The ::before pseudo-element


It allows us to add something before the element's content. It is used to add
something before the specific part of an element. Generally, it is used with
the content property.
We can also add the regular strings or images before the content using this
pseudo-element.

Example
• <html>
• <head>
• <style>
• body{
• text-align: center;
• }
• h1::before {
• content: "'Hello World.'";
• color: red;
• }
• </style>
• </head>
• <body>
• <h1>Welcome to the javaTpoint.com. </h1>
• <h2> This is an example of ::before pseudo-element. </h2>
• <h3> In the first line the "Hello World" has added by using the pseu
do-element ::before </h3>
• </body>
• </html>

Output

The ::after pseudo-element


It works similar to ::before pseudo-element, but it inserts the content after
the content of the element. It is used to add something after the specific part
of an element. Generally, it is used with the content property.
It also allows us to add regular strings or images after the content.

Example
• <html>
• <head>
• <style>
• body{
• text-align: center;
• }
• h1::after {
• content: "'Welcome to the javaTpoint.com.'";
• color: red;
• }
• </style>
• </head>
• <body>
• <h1> Hello World. </h1>
• <h2> This is an example of ::after pseudo-element. </h2>
• <h3> In the first line the "Welcome to the javaTpoint.com." has add
ed by using the pseudo-element ::after </h3>
• </body>
• </html>

Output

The ::selection pseudo-element


It is used to style the part of an element that is selected by the user. We can
use the following CSS properties with it:

• color.

• background-color.

• Other properties include cursor, outline, etc.

Example
• <html>
• <head>
• <style>
• body{
• text-align: center;
• }
• h1::selection {
• color: red;
• }
• </style>
• </head>
• <body>
• <h1> Hello World. </h1>
• <h2> Select the text in first line to see the effect. </h2>
• <h3> This is an example of ::selection pseudo-element. </h3>
• </body>
• </html>

Output

CSS classes and pseudo-element


The pseudo-elements can be combined with CSS classes to style the specific
element having that class. The syntax of combining the CSS classes with the
pseudo-elements is given below.

Syntax
It can be written as:
• selector.class::pseudo-element {
• property: value
• }

Example
This example will affect the first letter of those <h1> elements that
have class="example" rather than affecting the all <h1> elements.
• <html>
• <head>
• <style>
• body{
• text-align: center;
• }
• h1.example::first-letter {
• color: red;
• font-size: 2cm;
• font-family: Lucida Calligraphy;
• }
• </style>
• </head>
• <body>
• <h1 class="example"> Hello World. </h1>
• <h1> Welcome to the javaTpoint.com. </h1>
• <h3> This is an example of pseudo-element with CSS classes.</
h3>
• </body>
• </html>

Output

You might also like