Que son las hojas de estilo (CSS) CSS y HTML Definición de estilos a nivel página Propiedades relacionadas a fuentes. Agrupación de varios elementos HTML con una misma regla de estilo Definición de varias reglas para un mismo elemento HTML Propiedades relacionadas al texto (color, text-align, text-decoration) Más propiedades relacionadas al texto (letter-spacing, word-spacing, text-indent, text-transform) Herencia de propiedades de estilo. Definición de un estilo en función del contexto. Definición de hojas de estilo en un archivo externo. Definición de estilos por medio de clases. Definición de estilos por medio de id. Propiedades relacionadas al borde de un elemento HTML (border-width, border-style, border-color) Más propiedades relacionadas al borde de un elemento HTML Propiedades relacionadas al padding de un elemento HTML Propiedades relacionadas al margen de un elemento HTML Propiedades relacionadas a listas Propiedades relacionadas al fondo (background) Propiedades relacionadas a fuentes Propiedades relacionadas al border Propiedades relacionadas al padding Propiedades relacionadas al margin Propiedades relacionadas al fondo (background) El selector universal * Pseudoclases Eliminacion subrayado de enlace Creación de un menú vertical Creación de un menú horizontal Propiedades relacionadas a la dimensión de un objeto en la página. Unidades de medida (px, rem, em, cm, mm etc.) Formas para indicar el color. Definir un cursor para un elemento HTML Aplicación de hojas de estilo a un formulario Definiendo reglas de estilo a una tabla. Posicionamiento relativo (position: relative) Posicionamiento absoluto (position: absolute) Posicionamiento absoluto y propiedad z-index Posicionamiento fijo (position: fixed) Disposición de 2 columnas (position: absolute) Propiedad float aplicada a una imagen Propiedades relacionadas a la dimensión de un objeto en la página Propiedad clear Disposición de 2 columnas (propiedad float) Disposición de 2 columnas, cabecera y pie Disposición de 3 columnas, cabecera y pie Diseño de ancho fijo Diseño de ancho líquido Selector de hijos Selector de hermano adyacente y hermano general Selector de atributo Pseudo-clases: first-child y last-child) Pseudo-clases: nth-child y nth-last-child Pseudo-clases: nth-of-type, nth-last-of-type, first-of-type y last-of-type Pseudo-clases: only-child y only-of-type Pseudo-clase: empty Pseudo-elementos: first-letter y first-line Pseudo-elementos: before y after CSS media queries Flexbox Flexbox - (flex-direction aplicada al contenedor) Flexbox - (justify-content aplicada al contenedor) Flexbox - (align-items aplicada al contenedor) Flexbox - (flex-wrap aplicada al contenedor) Flexbox - (align-content aplicada al contenedor) Flexbox - (flex-flow aplicada al contenedor) Flexbox - (flex-grow aplicada a los items) Flexbox - (flex-shrink aplicada a los items)o Flexbox - (flex-basis aplicada a los items) Flexbox - (flex aplicada a los items) Flexbox - (order aplicada a los items) Flexbox - (align-self aplicada a los items)

Pseudo-elementos: before y after

Los pseudo-elementos ::before y ::after insertan contenido, mediante CSS, delante ( before ) y respectivamente detrás ( after ) del contenido de un elemento html. Los pseudo-elementos tienen que tener un contenido aunque sea solo una cadena de texto vacía.

El pseudo-elemento before se utiliza para agregar algún contenido previo al contenido actual del elemento. Debemos inicializar la propiedad content con el dato a agregar.

El pseudo-elemento after agrega contenido al final del elemento.

Veamos un problema para entender su funcionamiento. Supongamos que queremos que cada vez que en la página utilizamos el elemento HTML strong aparezca su contenido precedido por el caracter "¡" y que finalice con el caracter "!". Podemos utilizar los Pseudo-elementos before y after que agreguen estos caracteres.

Teniendo la página:

<!DOCTYPE html>
<html>
<head>
<title>Problema</title>
<meta charset="UTF-8">
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<p>SQL, Structure Query Language (Lenguaje de Consulta Estructurado) es un lenguaje de programacion para
trabajar con base de datos relacionales como <strong>MySQL</strong>, Oracle, etc.</p>
<p><strong>MySQL</strong> es un interpretador
de SQL, es un servidor de base de datos.</p>
<p><strong>MySQL</strong> permite crear base
de datos y tablas, insertar datos, modificarlos,
eliminarlos, ordenarlos, hacer consultas y
realizar muchas operaciones, etc., resumiendo:
administrar bases de datos.</p>

<p>Ingresando instrucciones en la linea
de comandos o embebidas en un lenguaje como
PHP nos comunicamos con el servidor. Cada
sentencia debe acabar con punto y coma (;).</p>
</body>
</html>

Y aplicando las siguientes reglas de estilo:

strong::before {
content:"¡";
}

strong::after {
content:"!";
}

Como podemos ver donde en la página definimos los elementos strong se le añadieron un caracter al principio y otro al final:

before after css

Podemos agregar cualquier contenido pero no elementos HTML (h1, h2, p, table etc.)