- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
CSS :first-letter pseudo-element
Use this element to add special style to the first letter of the text in a selector. The following example demonstrates how to use the :first-letter element to add special effects to the first letter of elements in the document.
Example
<html>
<head>
<style>
p:first-letter {
font-size: 5em;
}
p.normal:first-letter {
font-size: 10px;
}
</style>
</head>
<body>
<p class="normal"> First character of this paragraph will be normal and will
have font size 10 px;
</p>
<p>The first character of this paragraph will be 5em big as defined
in the CSS rule above. Rest of the characters in this paragraph
will remain normal. This example shows how to use :first-letter pseduo
element to give effect to the first characters of any HTML element.
</p>
</body>
</html>
Updated on 29-Jun-2020 08:00:41
- Related Questions & Answers
- The ::first-letter Pseudo-element in CSS
- Usage of CSS :first-line pseudo-element
- The ::first-line Pseudo-element in CSS
- CSS :after pseudo-element
- CSS :before pseudo-element
- Styling First-Letters with CSS ::first-letter
- Difference Between Pseudo-Class and Pseudo-Element in CSS
- The :first-child Pseudo-class in CSS
- What is Pseudo-element in CSS
- Usage of :first-child pseudo-class in CSS
- The ::before and ::after Pseudo-element in CSS
- CSS Pseudo Elements
- Letter Spacing using CSS
- Letter Spacing in CSS
- What are CSS pseudo-classes
Advertisements