CSS :first-line

The CSS :first-line pseudo-element is used to style the first line of text in a block-level element, such as a paragraph. This is especially useful for creating typographic effects, like emphasizing the opening line of a section or story.

The syntax for the :first-line pseudo-element is:

</>
Copy
selector:first-line {
    property: value;
}

Where:

ParameterDescription
selectorThe block-level element (e.g., <p>, <div>) to which the :first-line pseudo-element will apply.
propertyThe CSS property to style the first line of text.
valueThe value assigned to the CSS property.

Examples

1. Styling the First Line with Bold Text

In this example, the first line of each paragraph is styled with bold text.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        p:first-line {
            font-weight: bold;
        }
    </style>
</head>
<body>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent convallis libero in leo aliquam, eget fermentum arcu cursus.</p>
    <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.</p>
</body>
</html>

2. Changing Font Size and Color of the First Line

Here, the first line of each paragraph is styled with a larger font size and a blue color.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        p:first-line {
            font-size: 1.5em;
            color: blue;
        }
    </style>
</head>
<body>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel risus nec sapien vulputate consectetur.</p>
    <p>Proin id dui quis magna aliquet vehicula sed in orci.</p>
</body>
</html>

3. Applying Letter Spacing to the First Line

In this example, the first line of each paragraph is styled with increased letter spacing to create a unique effect.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        p:first-line {
            letter-spacing: 2px;
        }
    </style>
</head>
<body>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce scelerisque magna vel nibh auctor, non dignissim mi suscipit.</p>
    <p>Mauris tincidunt, nunc id tincidunt faucibus, orci nulla vehicula sem, eu sollicitudin arcu velit sit amet justo.</p>
</body>
</html>

4. Styling First Line with Text Transformation

In this example, the first line of each paragraph is styled with uppercase transformation.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        p:first-line {
            text-transform: uppercase;
        }
    </style>
</head>
<body>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut id ligula at est venenatis hendrerit vel in nisi.</p>
    <p>Cras blandit justo ut eros vulputate fermentum.</p>
</body>
</html>

5. Combining Multiple Styles for the First Line

In this example, the first line of each paragraph is styled with bold text, italic style, and a green color.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        p:first-line {
            font-weight: bold;
            font-style: italic;
            color: green;
        }
    </style>
</head>
<body>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vel libero eget mauris tincidunt malesuada.</p>
    <p>Aenean vel ex id neque hendrerit gravida at a arcu.</p>
</body>
</html>