CSS - Pseudo-element - ::first-line
The ::first-line pseudo-element is used to apply special effects or styles to the first line of a block-level element. This pseudo-element has no effect on inline elements. It only works on block-level elements.
The extent of text that will be affected by the pseudo-element ::first-line depends on factors such as width of the viewport, length of line, font-size, letter-spacing, word-spacing, etc.
Only a small list of CSS properties can be used with ::first-line pseudo- element, which listed as below:
Font related properties
Background related properties
Color property
Syntax
selector::first-line { /* ... */ }
CSS ::first-line Example
Here is an example to show a simple usage of ::first-line pseudo-element:
<html> <head> <style> p::first-line { color: black; font-size: 2em; text-decoration-color: rgb(4, 65, 65); text-decoration-line: line-through; } </style> </head> <body> <p>First line is affected by the pseudo-element.<br /> Second line has no effect. </p> <span>Even to an inline element there is no effect.</span> </body> </html>
Advertisements
To Continue Learning Please Login
Login with Google