::first-line (:first-line)

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

El Pseudoelemento ::first-line aplica estilos a la primera línea de un elemento de bloque. Nótese que la longitud de la primera línea depende de muchos factores, incluyendo el ancho del elemento, el ancho del documento y el tamaño de fuente del texto.

css

/* Selecciona la primera línea de un  */
p::first-line {
  color: red;
}

Nota: CSS3 introdujo la notación ::first-line (con doble dos puntos) para distinguir pseudo-clases de pseudo-elementos. Los navegadores también aceptan :first-line, añadido en CSS2.

Propiedades permitidas

Sólo unas pocas propiedades de CSS se pueden usar con el pseudoelemento ::first-line:

Todas las propiedades de fuente: font, font-kerning, font-style, font-variant, font-variant-numeric, font-variant-position, font-variant-east-asian, font-variant-caps, font-variant-alternates, font-variant-ligatures, font-synthesis, font-feature-settings, font-language-override, font-weight, font-size, font-size-adjust, font-stretch, and font-family
Todas las propiedades de fondo: background-color, background-clip, background-image, background-origin, background-position, background-repeat, background-size, background-attachment, and background-blend-mode
La propiedad color
word-spacing, letter-spacing, text-decoration, text-transform, and line-height
text-shadow, text-decoration, text-decoration-color, text-decoration-line, text-decoration-style, and vertical-align.


  Los estilos sólo se aplicarán en la primera línea de este párrafo.
  Posteriormente, todo el texto tendrá el estilo normal. ¿Ves?


La primera línea de este elemento no recibe ningún estilo especial, porque no
  es un elemento de bloque.

CSS

css

::first-line {
  color: blue;
  text-transform: uppercase;

  /* ADVERTENCIA: NO USES ESTOS*/
  /* Muchas propiedades son inválidas en pseudoelementos ::first-line */
  margin-left: 20px;
  text-indent: 20px;
}