- 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
Usage of CSS :first-line pseudo-element
Use this element to add special styles to the first line of the text in a selector. The following example demonstrates how to use the :first-line element to add special effects to the first line of elements in the document.
Example
<html>
<head>
<style>
p:first-line {
text-decoration: underline;
}
p.noline:first-line {
text-decoration: none;
}
</style>
</head>
<body>
<p class="noline"> This line would not have any underline because this belongs to nline class.</p>
<p>The first line of this paragraph will be underlined as defined in the CSS rule above. Rest of the lines in this paragraph will remain normal. This example shows how to use :first-line pseduo element to give effect to the first line of any HTML element.</p>
</body>
</html>
Published on 27-Apr-2018 06:05:29
- Related Questions & Answers
- The ::first-line Pseudo-element in CSS
- Usage of :first-child pseudo-class in CSS
- CSS :first-letter pseudo-element
- The ::first-letter Pseudo-element in CSS
- Usage of CSS :focus pseudo-class
- Usage of :link pseudo-class in CSS
- Usage of :visited pseudo-class in CSS
- Usage of :hover pseudo-class in CSS
- Usage of :active pseudo-class in CSS
- Usage of :lang pseudo-class in CSS
- CSS :after pseudo-element
- CSS :before pseudo-element
- Difference Between Pseudo-Class and Pseudo-Element in CSS
- The :first-child Pseudo-class in CSS
- What is Pseudo-element in CSS
Advertisements