1 1 1 1 1 1 1 1 1 1 (0 Votes)

Esempio 62: uso di pseudo classe :after e :before per aggiungere testo automatico prima e dopo ogni paragrafo.  Per aggiungere dei contenuti si utilizza la CSS-proprietà content. Risultato

<!DOCTYPE html>

<html lang="it">

<head>

<meta charset="UTF-8">

<title>Titolo del documento</title>

<style>

p::before {
content: "Articolo Meteo - ";
color:red;
background-color: #9CF;
}
p::after {
content: " - da MeteoBamba.it";
color:#F00;
background-color: yellow;
}

</style>

</head>


<body>

 <p>Arriva il caldo torrido e uccide. L'annunciata ondata di temperature roventi al suo esordio in Italia ha già fatto tre vittime, in Lombardia, Marche e Veneto: un senzatetto cardiopatico a Milano, un pensionato nelle campagne di San Benedetto del Tronto e un'altra persona a Mozzecane, nel Veronese. </p>

<p>Anche se nelle prossime ore è previsto il picco per l'emergenza caldo nella penisola con 16 città da 'bollino rosso'. Nella Capitale, unica città d'Italia ad avere il bollino rosso per tre giorni di seguito, il caldo aggrava anche un'altra emergenza, quella sui rifiuti. </p>

<p>Dopo che nelle scorse ore la Regione Lazio ha lanciato l'allarme allertando le Asl rispetto "ai possibili effetti sulla salute pubblica" collegata al "protrarsi della mancata raccolta dei rifiuti", oggi si è verificato in periferia l'ennesimo rogo di rifiuti provocando fumi tossici e la distruzione dei cassonetti, definito dalla sindaca Virginia Raggi "un vero attentato alla salute ed alle tasche dei contribuenti" attuato da "piromani ad orologeria". </p>

<p>E dopo l'Sos della Regione Lazio, l'Ama si è concentrata nella raccolta rifiuti proprio nelle aree attorno agli ospedali. La prima vittima del caldo è stata Costantin Stroe, un romeno di 69 anni. Il corpo è stato trovato da un passante prima delle 8 in un'aiuola non lontano dalla stazione centrale di Milano. Nelle tasche aveva dei documenti sanitari da cui è emerso che era un cardiopatico, mentre altri senzatetto hanno confermato che viveva come loro in strada.</p>

</body>

<!-- esempio realizzato o adattato per il corso gratuito Html/Css di https://www.guideinformaticagratis.it/ -->

</html>

Risultato  






Commenti (0)

There are no comments posted here yet

Lascia i tuoi commenti

  1. Posting comment as a guest.
Allegati (0 / 3)
Share Your Location