::first-line CSS Pseudo Element


The CSS ::first-line pseudo-element is used to style the first line of text within a block-level element. It allows you to apply specific styles, such as font properties, color, and text decorations, exclusively to the first line of text within an element. This can be particularly useful for creating typographic effects or emphasizing the beginning of a paragraph or block of text without the need for additional HTML markup.

Here's a basic example of how to use ::first-line in CSS:

p::first-line {
font-weight: bold;
color: blue;
text-decoration: underline;

In this example, the first line of text within any <p> (paragraph) element will be displayed in bold blue text with an underline. The ::first-line pseudo-element is a handy tool for enhancing the visual appeal and readability of your web content.


element::first-line { … }


<p>Lorem ipsum dolor sit amet<br>consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.,</p>
<p>Duis aute irure dolor in reprehenderit in<br> voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
p::first-line { 
border: 1px solid red;
background: #000;
color: red;
font-weight: bold;


In CSS3, pseudo-elements were denoted by two colons to make the syntax different from pseudo-classes. In CSS2, they are indicated by a single colon. Browsers generally understand both syntaxes.

Browser Support

The following table will show you the current browser support for the CSS ::first-line pseudo element.

Edge Chrome Firefox Opera Safari
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview

Last updated by CSSPortal on: 1st October 2023