- Data Structure
- Networking
- RDBMS
- Operating System
- Java
- MS Excel
- iOS
- HTML
- CSS
- Android
- Python
- C Programming
- C++
- C#
- MongoDB
- MySQL
- Javascript
- PHP
- Physics
- Chemistry
- Biology
- Mathematics
- English
- Economics
- Psychology
- Social Studies
- Fashion Studies
- Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Creating Attractive First Lines with CSS ::first-line
The CSS ::first-line pseudo-element helps us style first line of an element
The following examples illustrate CSS ::first-line pseudo-element.
Example
<!DOCTYPE html> <html> <head> <style> body { text-align: center; background-color: darkorchid; } ::first-line { font-size: 2em; color: black; font-weight: bold; text-shadow: 0 -10px grey; } </style> </head> <body> <article> <p>Donec rutrum a erat vitae interdum. </p> <p> Donec suscipit orci sed arcu cursus imperdiet. Duis consequat aliquet leo, quis aliquam ex vehicula in. Vivamus placerat tincidunt hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque semper ex eget nulla consectetur varius. Integer a dolor leo. Donec semper ligula ac consequat scelerisque.</p> </article> </body> </html>
Output
This will produce the following result −
Example
<!DOCTYPE html> <html> <head> <style> article { text-align: center; } ::first-line { box-shadow: inset 0 0 13px orchid; } </style> </head> <body> <article> <h2>Donec rutrum a erat vitae interdum. </h2> <p> Donec suscipit orci sed arcu cursus imperdiet. Duis consequat aliquet leo, quis aliquam ex vehicula in. Vivamus placerat tincidunt hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque semper ex eget nulla consectetur varius. Integer a dolor leo. Donec semper ligula ac consequat scelerisque.</p> <p>Vivamus placerat tincidunt hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque semper ex eget nulla consectetur varius. Integer a dolor leo.</p> </article> </body> </html>
Output
This will produce the following result −
Advertisements