CSS Pseudo-elements In Hindi

Pseudo-elements In CSS In Hindi – Is Tutorial Me Hamne CSS Pseudo Elements Ko With Example Explain Kiya Hai And CSS Pseudo Elements Ke Hamne Bahut Sare Examples Ko Bhi Cover Kiya Hai |

Yadi Aapne HTML Full Course And CSS Full Course And Python Full Course And PHP Full Course Nhi Read Kiya Hai To Aap Vah Bhi Read Kar Sakte Hai |

Contents

What are Pseudo-Elements In CSS In Hindi ?

Hamne CSS Selectors Ke Bare Me Dekha Tha Ki Kese Ham Kisi Element Ko Select Kar Ke Use Style De Skte Hai, CSS Pseudo Element Bhi, Elements Ko Style Dene Ke Liye Use Kiya Jata Hai |

CSS Selector Ki Help Se Style Dene Se Vah Pure Element Apply Hoti Hai But Agar Ham Chahte Hai Ki Element Ke Kisi Part Par Hi Style Apply Ho To Iske Liye CSS Pseudo Element Use Kiya Jata Hai |

Matalab CSS Pseudo Element Kisi Element Ke Specified Part Ko Style Dene Ke Liye Use Kiya Jata Hai |

For An Example :

Kisi Element Ke First Letter Ko Ya First Line Style Dena Ho
Kisi Content Ke Pahle Ya Bad Me Content Insert Karna Ho Etc…

Syntax for CSS Pseudo-Element In Hindi

CSS Pseudo-Element Ko Use Krne Ka Syntax Is Prakar Hai –

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

The ::first-line Pseudo-element In CSS In Hindi

Jaisa Ki ::first-line Nam Se Pta Chal Rha Hai Ki Yah Kisi Element Ki First Line Ko Style Dene Ke Liye Use Ki Jati Hai |

Example :

<!DOCTYPE html>
<html>
<head>
<style>
p::first-line {
  color: red;
  font-family : verdana;
}
</style>
</head>
<body>

<h2>Master Programing CSS Pseduo Element</h2>

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the 
  industry's standard dummy text ever since the 1500s,Lorem Ipsum is simply dummy text of the printing
  and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</p>

</body>
</html>

Output :

Dekha Ki Hamne Sirf First Line Ko Hi Style Di Hai Jo Ki CSS Selector Ki Help Se Nhi Kiya Ja Skta Tha |

Note : ::first-line Pseudo Element Keval Block Level Element Par Hi Apply Kiya Ja Skta Hai , Aur App :: Ki Jagah : Bhi Use Kar Skte Hai , Matalab :first-line And ::first-line Dono Valid Hai |

The ::first-letter Pseudo-element In CSS In Hindi

::first-letter Pseudo Element Kisi Element Ke First Letter Ko Style Dene Ke Liye Use Kiya Jata Hai |

Example : Pichhle Example Me Hi ::first-line Ko ::first-letter Se Replace Kar Dete Hai |

<!DOCTYPE html>
<html>
<head>
<style>
p::first-letter {
  color: red;
  font-size: xx-large;
}
</style>
</head>
<body>

<h2>Master Programing CSS Pseduo Element</h2>

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the 
  industry's standard dummy text ever since the 1500s,Lorem Ipsum is simply dummy text of the printing
  and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</p>

</body>
</html>

Output :

Hamne Dekha Ki <p> Ke Only First Letter Par Hi Style Apply Hua Hai |

Note : ::first-letter Bhi Only Block Level Element Par Hi Apply Hota Hai , Aur Double :: Ki Jagah Single : Bhi Usr Kar Skte Hai, Matalab ::first-letter Ki Jagah :first-letter Bhi Use Kar Skte Hai |

Pseudo-elements and CSS Classes In Hindi

Pseudo Elements CSS Classes Ke Sath Bhi Use Kiya Ja Skta Hai |

Example : Ek Tag <p> Lete Hai Aur Use Class “a” Dete Hai Fir Pseudo Element Ki Help Se <p> Ke First Letter Ko Style Dete Hai |

<!DOCTYPE html>
<html>
<head>
<style>
p.a::first-letter {
  color: red;
  font-size: 200%;
}  
</style>
</head>
<body>

<p class="a">Master Programing</p>
<p>Learn Programing In Hindi</p>
</body>
</html>

Output :

Output Me Hamne Dekha Ki Kis Tarah CSS Classes Ke Sath Pseudo Element Ko Use Kiya Ja Skta Hai |

Multiple Pseudo-elements In CSS In Hindi

Kisi Element Par Ek Se Jyada Pseudo Element Ko Ek Sath Use Kiya Ja Skta Hai |

Example :

<!DOCTYPE html>
<html>
<head>
<style>
p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}

p::first-line {
  color: blue;
  font-variant: small-caps;
}
</style>
</head>
<body>

<p>Master programming is a website that enables people that aren't well versed in English to learn programming 
  languages like Python, C, C++, JAVA, CSS, HTML, JavaScript, PHP in HINDI. Masterprograming.com provides all 
  the Programming Language education for ABSOLUTELY FREE OF COST
</p>

</body>
</html>

Output :

Output Me Hmne Dekha Ki Kese <p> Par ::first-letter And ::fiest-line Pseudo Element Ko Ek Sath Apply Kiya Hai |

CSS – The ::before Pseudo-element In Hindi

Kisi Element Ke Pahle Kuchh Content Insert Krne Ke Liye ::before Pseudo-element Ka Use Kiya Jata Hai |

Example :

<!DOCTYPE html>
<html>
<head>
<style>
h1::before {
  content: "This Is ";
  color:red;
  
}
</style>
</head>
<body>

<h1>Master Programing</h1>

<h1>Master Programing</h1>

</body>
</html>

Output :

To Dekha ::before Pseudo Element Ki Help Se <h1> Ke Content Se Pahle “This Is ” Kis Parkar Add Kiya |

CSS – The ::after Pseudo-element In Hindi

::after Pseudo Element Ki Help Se Aap Kisi Element Ke Bad Me Kuchh Content Insert Kar Skte Ho |

Example :

<!DOCTYPE html>
<html>
<head>
<style>
h1::after {
  content: " Is Awesome Website.";
  color:red;
  
}
</style>
</head>
<body>

<h1>Master Programing</h1>

<h1>Master Programing</h1>

</body>
</html>

Output :

CSS – The ::marker Pseudo-element In Hindi

::marker Pseudo Element Ki Help Se Ham Kisi List Ke Marker Ko Style De Skte Hai |

Example :

<!DOCTYPE html>
<html>
<head>
<style>
::marker { 
  color: red;
  font-size: 23px;
}
</style>
</head>
<body>

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JS</li>
</ul>

<ol>
  <li>HTML</li>
  <li>CSS</li>
  <li>JS</li>
</ol>

</body>
</html>

Output :

CSS Pseudo Elements Ko Lekar Koi Bhi Doubt Ho To Comment Section Me Puchh Skte Hai |