The ::first-letter Pseudo-element in CSS

CSSWeb DevelopmentFront End Technology

This CSS Pseudo Element selects the first letter of the content of an element. However, the this does not work if the element is inline-level.

Example

Let’s see an example for CSS ::first-letter pseudo element −

 Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
div{
   background-color: #32485d;
   border: 5px solid black;
   color: #959799;
}
p::first-letter {
   font-size: 1.5em;
   color: #f9f9f9;
   padding: 2px;
}
</style>
</head>
<body>
<div>
<h2>Eclipse IDE</h2>
<p>"Eclipse is an integrated development environment (IDE) for Java and other programming languages 
like C, C++, PHP, and Ruby etc. Development environment provided by Eclipse includes the Eclipse Java 
development tools (JDT) for Java, Eclipse CDT for C/C++, and Eclipse PDT for PHP, among others."</p>
</div>
</body>
</html>

Output

This will produce the following output −

Example

Let’s see another example of CSS ::first-letter pseudo element −

 Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
p::first-letter {
   font-size: 1.5em;
   background-color: black;
   color: #dc3545;
   padding: 2px;
}
</style>
</head>
<body>
<div>
<h2>Machine Learning Tutorials</h2>
<p>TensorFlow</p><p>Machine Learning with Python</p><p>Time Series</p><p>PyTorch</p>
</div>
</body>
</html>

Output

This will produce the following output −

raja
Published on 08-Jan-2020 11:24:33
Advertisements