Pseudo elements Selectors In CSS

Pseudo Elements: Pseudo-element in CSS is used to add style in specified parts of an element.

CSS Selectors Can be divided into Five categories:

1.Simple Selectors (Element selector, Id selector, Class selector, Universalselector)

2.Combinator Selectors (Descendant selector, child selector, sibling selector,General selector)

3. Attribute Selector (allow you to select elements by referring their attributes)

4.Pseudo-class selectors (select elements based on a certain state)

5. Pseudo-elements selectors (select and style a part of an element)

Pseudo before :: Selectors in CSS with Example:

The :: before pseudo-element can be used to insert some content before the content of an element .

Example 1: Pseudo before :: selector

<!DOCTYPE html>

<html>

<head>

<style>

p::before {

background-color:rgb(223, 6, 243);

font-style: italic;

content: "Welcome To Launchpadlwd";

font-size: 20px;

}

</style>

</head>

<body>

<h2>This heading 2</h2>

</body>

</html>

Output:

Pseudo before :: Selectors in CSS with Example:

The :: after pseudo-element can be used to insert some content after the content of an element .

Example 2: Pseudo after :: selector

<!DOCTYPE html>

<html>

<head>

<style>

p::before {

background-color:rgb(223, 6, 243);

font-style: italic;

content: "Welcome To Launchpadlwd";

font-size: 20px;

}

</style>

</head>

<body>

<h2>This heading 2</h2>

</body>

</html>

Output:

Pseudo:: first-letter Selectors in CSS with Example:

::first-letter Pseudo-element: It is used to make changes to the first letter of an element

Example 3: Pseudo First-letter :: selector

<!DOCTYPE html>

<html>

<head>

<style>

p::first-letter {

background-color:rgb(223, 6, 243);

font-style: italic;

content: "Welcome To Launchpadlwd";

font-size: 20px;

}

</style>

</head>

<body>

<p>We can use :: first-letter element pseudo selector to add effects on first letter</p>

<h2>This heading 2</h2>

</body>

</html>

Output:

Pseudo:: first-line Selectors in CSS with Example:

::first-line Pseudo-element: It is used to make changes to the first line of an element.

Example 4: Pseudo First-line :: selector

<!DOCTYPE html>

<html>

<head>

<style>

p::first-line {

background-color:rgb(223, 6, 243);

font-style: italic;

content: "Welcome To Launchpadlwd";

font-size: 20px;

}

</style>

</head>

<body>

<p>We can use :: first-letter element pseudo selector to add effects on first letter</p>

<h2>This heading 2</h2>

</body>

</html>

Output:

Recents in Beach

Pseudo elements Selectors In CSS