Ejemplo
En el siguiente ejemplo se inserta la URL entre paréntesis después de cada enlace:
a:after
{
content: " (" attr(href) ")";
}
Inténtalo tú mismo " Más "Try it Yourself" ejemplos a continuación.
Definición y Uso
La propiedad de contenido es usado con el: before y: after pseudo-elementos, para insertar contenido generado.
| Valor por defecto: | normal |
|---|---|
| Heredado: | no |
| animatable: | no. Read about animatable |
| Versión: | CSS2 |
| la sintaxis de JavaScript: | You can't give an element a pseudo-class by using JavaScript, but there are other ways to get the same result: Try it |
Soporte para el navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la propiedad.
| Propiedad | |||||
|---|---|---|---|---|---|
| content | 1.0 | 8.0 | 1.0 | 1.0 | 4.0 |
Note: IE8 sólo es compatible con la propiedad de contenido si se ha especificado un DOCTYPE!.
sintaxis CSS
content: normal|none|counter|attr|string|open-quote|close-quote|no-open-quote|no-close-quote|url|initial|inherit;Valores de propiedad
| Valor | Descripción | Ejemplo |
|---|---|---|
| normal | Valor por defecto. Establece el contenido, si se especifica, a la normalidad, que por defecto es "none" (which is nothing) | Try it » |
| none | Establece el contenido, si se especifica, a la nada | Try it » |
| counter | Establece el contenido como un contador | Try it » |
| attr (attribute) | Establece el contenido como uno de los selector's atributo | Try it » |
| string | Establece el contenido del texto que especifique | Try it » |
| open-quote | Establece que el contenido sea una cotización de apertura | Try it » |
| close-quote | Establece que el contenido sea una cotización de cierre | Try it » |
| no-open-quote | Elimina la cita de apertura a partir del contenido, si se especifica | Try it » |
| no-close-quote | Elimina la cotización de cierre del contenido, si se especifica | Try it » |
| url( url ) | Establece que el contenido sea algún tipo de medios de comunicación (an image, a sound, a video, etc.) | Try it » |
| initial | Establece esta propiedad a su valor por defecto. Lea acerca inicial | |
| inherit | Hereda esta propiedad de su elemento padre. Lee sobre heredar |
Más ejemplos
Ejemplo
Cómo añadir colores de bala para <ul> o <ol> mediante la eliminación de sus balas por defecto y la adición de una entidad HTML que se parece a las balas (•) :
ul {
list-style: none; /* Remove list bullets */
padding: 0;
margin: 0;
}
li {
padding-left: 16px;
}
li:before {
content: "•"; /* Insert content that
looks like bullets */
padding-right: 8px;
color: blue; /* Or a color you prefer */
} Inténtalo tú mismo " Páginas relacionadas
Referencia CSS: : antes de pseudo elemento
Referencia CSS: : después de pseudo elemento