::before y ::after
Los pseudo-elementos ::before
y ::after
( existen desde CSS2 ) insertan contenido, mediante CSS, delante ( before
) y respectivamente detrás ( after
) del contenido de un elemento html.
li::before{ content: "contenido";}
Los pseudo-elementos tienen que tener un contenido aunque sea solo una cadena de texto vacÃa.
li::before{ content: "";}
Y lo mejor es que podemos dar formado a estos pseudo-elementos mediante CSS.
¿Tengo que poner los dos puntos dobles?
Los dos puntos dobles ( ::
) fueron introducidos en el CSS3 como un intento de hacer una distinción entre las :pseudo-clases (:link
, :visited
, :active
, :hover
, :focus
, :first-child
, :lang
) y los ::pseudo-elementos (::first-letter
, ::first-line
, ::before
, ::after
). Por suerte no pasa nada si no ponemos los dos puntos dobles delante de los pseudo-elementos ( ::before
), ya que la mayoría de los navegadores entienden el formato antiguo introducido en el CSS2 ( :before
). Es más: IE8 parece no entender los dos puntos dobles ( ::before
), pero sí entiende los dos puntos ( :before
).
El valor del elemento insertado puede ser:
una cadena de texto: li::before { content: "texto";}
una imagen: li::before { content: url(flecha.gif);}
un contador: li::before { content: counter(index);}
el valor de un atributo: p::before { content: attr(title);}
También puede:
abrir y cerrar comillas: span::before { content:open-quote;} span::after { content:close-quote;}
o restablecer el valor inicial: span::before{ content: initial;}
Insertar un cadena de texto
Veamos como insertar una cadena de texto delante de un párrafo:
p.ejemplo1::before {
content : "OJO: ";
color : #d14;
}
Ejemplo de párrafo con texto insertado delante.
Ejemplo de párrafo con texto insertado delante.
Texto con diacríticos o símbolos
Prácticamente podemos insertar cualquier carácter especial, y para insertarlo tenemos que escribir su código hexadecimal precedido por el carácter de escape ( \ ). En el siguiente ejemplo para escribir la ó de atención utilizamos este código: \0f3
.
p.ejemplo2::before {
content : "Atenci\0f3n: ";
color : #d14;
}
Ejemplo de párrafo con texto insertado delante.
Ejemplo de párrafo con texto insertado delante.
Insertar un contador
Los contadores en CSS son variables que pueden ser manipuladas e incrementadas con reglas CSS como counter-reset
, counter-increment
y la función counter()
counter-reset
ul{ counter-reset: index;}
En este caso la propiedad counter-reset
pone a 0 el contador CSS dentro de la lista <ul class="falso-ol">
. La palabra index
utilizada con counter-reset es un identificador.
counter-increment
.falso-ol li {counter-increment : index;}
Con esta regla la propiedad counter-increment
incrementa el valor del contador "index
"
la función counter()
La función counter()
toma como argumento el index
.falso-ol li::before {content : counter(index);}
Finalmente la función counter
saca en pantalla el valor del contador.
ul.falso-ol{
counter-reset:index;
}
.falso-ol li{
counter-increment: index;
}
.falso-ol li::before {
content:counter(index);
margin:.5em .5em .5em 1em;
color : #d14;
}
También podemos especificar el formato de los números del contador, utilizando las mismas palabras clave que las utilizadas con la propiedad list-style-type
:
armenian
, cjk-ideographic
, decimal
, decimal-leading-zero
, hebrew
, hiragana-iroha
, katakana
, katagana-iroha
, lower-alpha
, lower-greek
, lower-latin
, lower-roman
, upper-alpha
, upper-latin
, upper-roman
.
content:counter(index, decimal);
¡Pero lo podemos hacer más fácil utilizando listas ordenadas <ol>!
Si y NO.
Si queremos dar formato a los números de una lista – y quien no lo quiso alguna vez? – lo podemos hacer utilizando el pseudo-elemento ::before
.
Combinando valores
En el ejemplo anterior seria interesante poder añadir un punto detrás de cada numero. Podemos combinar varios valores separándolas por un espacio en blanco.
content:counter(index, decimal) ".";
ul.falso-ol1{
counter-reset:index1;
}
.falso-ol1 li{
counter-increment: index1;
}
.falso-ol1 li::before {
content:counter(index1, decimal) ".";
margin:.5em .5em .5em 1em;
color : #d14;
}
El valor de un atributo
En el siguiente ejemplo insertamos el valor del atributo data-title
delante del párafo.
p::before { content:attr(title);}
Es interesante remarcar que esta vez para insertar símbolos o diacriticos hay que utilizar el nombre mnemotécnico ( ó ) o el código numérico decimal ( ó ) o hex ( ó ) del glifo.
p.atributo::before{content:attr(data-title); color:#f00; margin-left:1em;}
Esto es peligroso.
Esto es peligroso.
Como van apilados los pseudo-elementos
En el siguiente ejemplo los pseudo-elementos ::before
y ::after
insertan contenido, mediante CSS, delante ( before
) y respectivamente detrás ( after
) del contenido del <div id="pila">
. Los dos pseudo-elementos tienen display:block
, y las dimensiones width
y height
iguales a las del <div id="pila">
. Manipulamos la posición de los pseudo-elementos para que las cosas sean claras. Observamos que <div id="pila">
se queda detrás del pseudo-elemento ::before
, mientras que el pseudo-elemento ::after
aparece encima del pseudo-elemento ::before
.
div#pila{
width:200px;
height:100px;
background-color:yellow;
color:#ccc;
margin:0 auto;
position:relative;
}
div#pila::before{
content:"::before";
width:200px;
height:100px;
background-color:red;
display:block;
position:absolute;
top:25px;
left:25px;
}
div#pila::after{
content:"::after";
width:200px;
height:100px;
background-color:blue;
display:block;
position:absolute;
top: 50px;
left:50px;
}
Contenido
A continuación especificamos para cada elemento el valor de z-index
de esta manera: para la caja ( div id="pila"
): z-index = 1
y para los pseudo-elementos: z-index = -1
. El resultado: solo el contenido de <div id="pila">
aparece encima de los pseudo-elementos.
div#pila1{
width:200px;
height:100px;
background-color:yellow;
color:#ccc;
margin:0 auto;
position:relative;
padding-top:60px;
text-align:center;
z-index:1;
}
div#pila1::before{
content:"";
width:200px;
height:100px;
background-color:red;
display:block;
position:absolute;
top:25px;
left:25px;
z-index:-1;
}
div#pila1::after{
content:"";
width:200px;
height:100px;
background-color:blue;
display:block;
position:absolute;
top: 50px;
left:50px;
z-index:-1;
}
Contenido
Limpiar los floats
La propiedad float
especifica si una caja tiene que flotar o no. Esto ya lo sabemos. También sabemos que es muy importante limpiar los floats para que los elementos posteriores a una caja flotada dejen de hacer cosas extrañas. El método tradicional es insertar un elemento - por ejemplo un salto de línea: <br class="clearfloats">
- que limpie los floats.
.clearfloats{ clear:both;}
Nicolas Gallagher tiene un método mejor que utiliza los pseudo-elementos ::befor
e y ::after
.
Solamante hay que aplicar una clase – por ejemplo .clearfix
– a la caja padre.
párafo test
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
background: #f5f5f5;
width:280px;
margin:0 auto;
}
.flotado {
float: left;
width: 100px;
height: 50px;
margin: 20px;
background: #d9d9d9;
}
p.floats {
margin-top: 20px;
text-align:center;
}
párafo test