9.1 Pseudo-elementi ::before e ::after
Gli pseudo-elementi ::before e ::after sono strumenti potenti in CSS che permettono di aggiungere elementi decorativi
prima o dopo il contenuto degli elementi senza modificare l'HTML. Sono ampiamente usati per creare effetti visivi,
migliorare l'interfaccia utente e aggiungere stili agli elementi.
Descrizione:
::before: pseudo-elemento aggiunto prima del contenuto dell'elemento::after: pseudo-elemento aggiunto dopo il contenuto dell'elemento
Sintassi:
element::before {
/* stili per lo pseudo-elemento before */
}
element::after {
/* stili per lo pseudo-elemento after */
}
Proprietà principali
Gli pseudo-elementi ::before e ::after possono contenere praticamente qualsiasi proprietà CSS, inclusi colore, dimensione,
posizionamento, sfondo, ombre, ecc. Tuttavia, affinché lo pseudo-elemento sia visibile, è necessario impostare il contenuto e la dimensione.
content: imposta il contenuto dello pseudo-elemento. Può essere testo o immagine, nonché una stringa vuotadisplay: determina il tipo di visualizzazione dello pseudo-elemento. Solitamente si usablockoinline-blockposition: gestisce il posizionamento dello pseudo-elemento (per esempio,absoluteorelative)widtheheight: impostano le dimensioni dello pseudo-elemento
9.2 Aggiungere testo
Con la proprietà content puoi facilmente aggiungere testo all'inizio o alla fine di qualsiasi elemento.
.example::before {
content: "Inizio: ";
color: blue;
}
.example::after {
content: " :Fine";
color: red;
}
<body>
<p class="example">Questo è un esempio di testo</p>
</body>
Spiegazione del codice:
.example::before: aggiunge il testo "Inizio: " prima del contenuto dell'elemento e lo colora di blu.example::after: aggiunge il testo " :Fine" dopo il contenuto dell'elemento e lo colora di rosso
9.3 Linee decorative
Puoi anche aggiungere linee decorative che incorniciano il contenuto:
.decorative-line::before,
.decorative-line::after {
content: "";
display: block;
height: 2px;
background: black;
margin: 10px 0;
}
<body>
<div class="decorative-line">Testo con linee decorative</div>
</body>
Spiegazione del codice:
.decorative-line::before: crea una linea decorativa prima del contenuto dell'elemento.decorative-line::after: crea una linea decorativa dopo il contenuto dell'elemento
9.4 Inserimento di icone
Non ti basta il testo? Allora puoi facilmente inserire un paio di icone:
.icon::before {
content: url('https://via.placeholder.com/20');
display: inline-block;
vertical-align: middle;
margin-right: 5px;
}
<body>
<p class="icon">Testo con un'icona</p>
</body>
Spiegazione del codice:
.icon::before: aggiunge un'icona prima del testo, utilizzando l'URL dell'immagine
9.5 Elementi decorativi complessi
Ora aggiungiamo qualcosa di più complesso:
.complex-decor::before {
content: "";
display: block;
width: 50px;
height: 50px;
background: linear-gradient(45deg, #f06, transparent);
position: absolute;
top: -10px;
left: -10px;
}
.complex-decor {
position: relative;
padding: 20px;
background: #eee;
margin: 20px;
}
<body>
<div class="complex-decor">Elemento con un angolo decorativo</div>
</body>
Spiegazione del codice:
.complex-decor::before: crea un elemento decorativo davanti al contenuto principale, utilizzando un gradiente e un posizionamento assoluto.complex-decor: imposta un posizionamento relativo per l'elemento genitore, in modo che lo pseudo-elemento possa essere posizionato in relazione ad esso
9.6 Uso delle animazioni
Puoi anche aggiungere un'animazione:
.animated::before {
content: "";
display: block;
width: 100px;
height: 100px;
background: red;
animation: rotate 5s infinite;
margin: 20px auto;
}
@keyframes rotate {
0% { transform: rotate(0deg); }
50% { transform: rotate(180deg); }
100% { transform: rotate(360deg); }
}
<body>
<div class="animated"></div>
</body>
Spiegazione del codice:
.animated::before: crea uno pseudo-elemento quadrato e lo anima con una rotazione utilizzando i keyframes
GO TO FULL VERSION