Forzar a aparecer una imagen con CSS

[Daphne]

Me preguntaba si se puede definir con el CSS un estilo que lleve incorporada una imagen justo antes de aparecer las primeras letras, sin hacer el truco de colocar esa imagen como fondo y conseguir que encaje justo antes de las primeras letras.

No sé si me he explicado, para variar.

[amanda75]

Puedes definir los párrafos como una lista y en el css determinar que, en vez de que aparezca un punto, que aprezca una imagen y le das la dirección

<ul>(puedes dejarlo vacio)
<li> (párrafo 1)</li>
<li> (párrafo 2)</li>
<li> (párrafo 3)</li>
</ul>

y en el css
li { list-style-image:url(mi_carpeta/mi_imagen.png)}

[Daphne]

Muchas gracias.

¿Habrá algún modo de hacerlo sin definir una lista? Por ejemplo, ¿podría definirse para una clase?

[amanda75]

Pues si señora Al decirlo tú me acordé que había leído "algo" en "alguna parte". No lo he utilizado nunca, te hago un copy-paste directamente desde mis apuntes, a ver si te sirve

:before y :after

Con los pseudo-elementos :before (antes) y :after (después) se puede insertar un contenido antes o después de un elemento determinado y definir el estilo del contenido insertado. La propiedad 'content', junto con estos pseudo-elementos, especifican lo que se inserta.

Podemos lograr que antes de cada elemento <H3> aparezca el texto "Tema:" sin necesidad de tener que escribirlo en cada título. También podemos hacer que cada párrafo termine con un pequeño ícono o poner "Fin" al pie de cada página usando las siguientes reglas.

H3:before {content: "Tema: "}
P:after {content: url("icono.gif")}
BODY:after {content: "Fin"; display: block;}

En la última regla hemos especificado también "display: block" para que la palabra "Fin" comience en una nueva línea (como si fuese un nuevo párrafo).

[Daphne]

Hala, qué bien, muchísimas gracias, de verdad. :)