First line of a paragraph

Within the CSS properties that allow us to manipulate text elements we find the pseudo-element
first-line
of the language CSS. With the pseudo-element
first-line
we can modify the properties of the first line of a paragraph. We understand it as the first line, where the browser cuts the paragraph because it coincides with the end of the browser.

The properties that we can modify in the pseudo-element
first-line
of the language CSS are as follows:

  • font properties, to be able to establish a font, larger or smaller size,…
  • color properties, to change the color of the line.
  • background properties, to be able to have a background color or image of the first line.
  • word-spacing, to control the spacing between words.
  • letter-spacing, to control the spacing between letters.
  • text-decoration, to add elements such as underlines or similar.
  • vertical-align, to vertically align the text.
  • text-transform, to transform the content of the text and, for example, make it uppercase.
  • line-height, to change the size of the first line.
  • clear, to indicate how to place the first line with respect to the previous element.

So, for example we can specify the following code to define our first line of a paragraph. The HTML paragraph is managed by the element.
p
. This is why the pseudo-element
first-line
we apply it to said element.

p:first-line{
  color:#0000ff;
  text-transform:uppercase; 
}

In this case we have achieved that the first line is blue and that its content is in capital letters.

Now we only have to put a paragraph using the element
p
on our page HTML. Like the following:

<p>In a place in La Mancha, the name of which I do not want to remember, not long ago there lived one of those gentlemen with a lance in a lance, an old buckler, a skinny nag and a racing greyhound. A pot of something more beef than mutton, salpicón most nights, duels and losses on Saturdays, lentils on Fridays, some extra palomino on Sundays, consumed three parts of his property. The rest of her wore a veil tunic, woolen leggings for the holidays with her slippers of the same, on weekdays she honored herself with her finest velori.</p>

This way we will have given styles to the first line of a paragraph with CSS.