Pseudo Elementos

Los pseudoelementos no hacen parte del dom (a exepcion de first-line y first-letter)pero si podemos hacer un cambio visual parecido al outline

PseudoElementos:
::First-line | BLOCK
::first-letter | BLOCK
::Placeholder
::selection
::before | HIJOS CONTENT(NECESARIO) - INLINE
::after | HIJOS CONTENT(NECESARIO) - INLINE



Primer PseudoElemento ::first-line | BLOCK


Selecciona la primera linea de un texto (no importa si se hace responsive siempre va a ser la primera linea) para modificarla a conveniencia. no funciona inline de css


esto esta escrito en letra cursiva Lorem ipsum dolor sit amet, consectetur adipisicing 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. Duis aute irure dolor in reprehenderit in 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.

Segundo PseudoElemento ::first-letter | BLOCK


Selecciona la primera palabra de un texto (no importa si se hace responsive siempre va a ser la primera linea) para modificarla a conveniencia.(no funciona inline de css)


Lorem ipsum dolor sit amet, consectetur adipisicing 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. Duis aute irure dolor in reprehenderit in 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. Lorem ipsum dolor sit amet, consectetur adipisicing 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. Duis aute irure dolor in reprehenderit in 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.

Tercer PseudoElemento ::placeholder


este pseudoelemento esta en el atributo placeholder por lo general es usado en inputs (No hace parte del dom)


Cuarto PseudoElemento ::selection


este pseudoelemento selection es utilizado al momento de seleccionar un texto lo podamos modificar(No hace parte del dom) Lorem ipsum dolor sit amet, consectetur adipisicing 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. Duis aute irure dolor in reprehenderit in 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. Lorem ipsum dolor sit amet, consectetur adipisicing 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. Duis aute irure dolor in reprehenderit in 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.



Quinto PseudoElemento ::BEFORE | HIJOS CONTENT(NECESARIO) - INLINE


El pseudoElemento before permite colocar texto en css y poderlo ver antes de la etiqueta ademas este texto funciona como un inline (actua como si no existiera)

Sexto PseudoElemento :: AFTER | HIJOS CONTENT(NECESARIO) - INLINE


El pseudoElemento after permite colocar texto en css y poderlo ver despues de la etiqueta ademas este texto funciona como un inline (actua como si no existiera)


ahora vamos a ver un ejemplo de estos pseudoelementos.


Texto real