440263493-Pseudo-elementos-maquetacion-web.pdf
- 2. Qué son pseudo elementos? Al igual que las pseudo-classes, los pseudo-elementos se añaden a los selectores, pero en cambio, no describen un estado especial sino que, permiten añadir estilos a una parte concreta del documento. Por ejemplo, el pseudo-elemento ::first-line selecciona solo la primera línea del elemento especificado por el selector. Sintaxis selector::pseudo-elemento { propiedad: valor; (reglas css) }
- 3. Pseudo Elementos A diferencia de las pseudo clases, los pseudo elementos son pocos: ● ::first-letter ● ::first-line ● ::selection ● ::before ● ::after
- 4. ::first-letter Este pseudo-elemento aplica estilos a la primera letra de un elemento HTML de tipo bloque, pero solo cuando antes del mismo no hay elementos como imágenes.
- 5. ::first-line Este pseudo-elemento aplica estilos a la primera línea de un elemento HTML de tipo bloque. Muchas propiedades como margin no funcionan en este pseudo elemento
- 6. ::selection Este pseudo-elemento aplica reglas a una porción de un documento que ha sido destacado (por ejemplo: selección con el mouse o algún otro puntero en un dispositivo) por el usuario. Sólo un pequeño subconjunto de propiedades CSS pueden ser usadas en una regla ::selection en el selector de: color, background, background-color y text-shadow.
- 7. ::before Este pseudo-elemento CSS coincide con el primer hijo virtual del elemento seleccionado. Se usa generalmente para añadir contenido estético a un elemento, usando la propiedad CSS content. Este elemento se muestra en línea con el texto de forma predeterminada.
- 8. ::after Este pseudo-elemento coincide con el último hijo virtual del elemento seleccionado. Se usa generalmente para añadir contenido estético a un elemento, usando la propiedad CSS content. Este elemento se muestra en línea con el texto de forma predeterminada.