Il design è nei dettagli: ecco come ho animato i link del sito

Spesso la differenza tra un sito web amatoriale e uno professionale sta nei piccoli dettagli. Oggi voglio condividere con voi una chicca tecnica che ho appena perfezionato su gianluca.online: una freccia rossa, corta e animata che appare accanto ai link.

Non è solo estetica; è User Experience. Serve a dare un feedback visivo immediato al lettore, segnalando i punti di approfondimento con un movimento fluido e moderno.

Il Codice CSS (Versione Ottimizzata)

Ho lavorato sul posizionamento millimetrico della freccia per assicurarmi che sia perfettamente allineata al testo, alzandola leggermente per renderla più elegante. Ecco il codice pronto all'uso:

/* Freccia corta, rossa e ANIMATA - Solo l'icona è colorata */
p a::after, 
li a::after {
   content: "\b08\FE0E" !important; 
   font-family: serif !important;
   color: #FC6167 !important; /* Solo la freccia è rossa */
   display: inline-block !important;
   padding-left: 0.1em !important;
   vertical-align: middle !important;
   /* MODIFICA QUI: Alza la freccia */
   vertical-align: 0.2em !important;
   font-weight: 900 !important;
   font-size: 0.8em !important;
   text-decoration: none !important;
   
   /* Movimento fluido */
   transition: all 0.3s ease !important; 
   transform: translate(0, 0) !important; 
}

/* Effetto al passaggio del mouse (Hover) sulla freccia */
p a:hover::after, 
li a:hover::after {
   transform: translate(3px, -3px) !important; 
   color: #FC6167 !important;
}

/* Rimuove l'icona dalle immagini nei link */
p a:has(img)::after, 
li a:has(img)::after {
   content: "" !important;
   display: none !important;
}

Cosa rende speciale questa micro-interazione?

• Allineamento Perfetto: Grazie al vertical-align: 0.2em, la freccia non "affoga" più sulla linea di base del testo, ma sembra fluttuare con eleganza.
• Feedback Dinamico: Al passaggio del mouse (hover), la freccia si sposta diagonalmente. È un segnale visivo chiaro che invita al click.
• Pulizia del Layout: Il selettore :has(img) è fondamentale: impedisce alla freccia di apparire quando il link è un'immagine o un banner, evitando fastidiosi errori grafici.

Un piccolo tocco di stile che rende la navigazione su gianluca.online ancora più curata e piacevole.

L'evoluzione: l'icona SVG Bicolor

Se volete portare il design del vostro blog a un livello superiore, il carattere Unicode potrebbe non bastarvi. Per gianluca.online, ho voluto qualcosa di più definito: un’icona SVG personalizzata che gioca su due colori.

Perché passare all'SVG?

L'SVG rimane nitido su qualsiasi schermo (anche i Retina dei Mac o degli smartphone più costosi) e permette di colorare separatamente la base e la freccia. In questo caso, ho scelto un Grigio Profondo (#4D4D4D) per la struttura e il mio Rosso iconico (#FC6167) per la punta della freccia.

Ecco il codice per questa versione avanzata:

/* Icona Link Esterno - DEEP GREY (#4D4D4D) e Freccia ROSSA */
p a::after, 
li a::after {
   content: "" !important; 
   display: inline-block !important;
   width: 0.9em !important;  
   height: 0.9em !important;
   
   /* SPAZIATURA BILANCIATA */
   margin-left: 0.25em !important; 
   margin-right: 0.45em !important; 
   
   /* Allineamento verticale millimetrico */
   vertical-align: -0.1em !important; 
   
   /* SVG Bicolor: Base #4D4D4D e Freccia #FC6167 */
   background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><g><path d="M400 320h32a16 16 0 0 1 16 16v128a48 48 0 0 1-48 48H48a48 48 0 0 1-48-48V112a48 48 0 0 1 48-48h160a16 16 0 0 1 16 16v32a16 16 0 0 1-16 16H64v320h320V336a16 16 0 0 1 16-16z" fill="%234D4D4D"></path><path d="M512 24v128c0 21.47-26 32-41 17l-35.71-35.71L191.8 376.77a24 24 0 0 1-33.94 0l-22.63-22.63a24 24 0 0 1 0-33.94L378.76 76.68 343.05 41C328 25.9 338.66 0 360 0h128a24 24 0 0 1 24 24z" fill="%23FC6167"></path></g></svg>') !important;
   
   background-repeat: no-repeat !important;
   background-size: contain !important;
   
   /* Animazione fluida all'hover */
   transition: all 0.3s ease !important; 
   transform: translate(0, 0) !important; 
}

/* Effetto Hover */
p a:hover::after, 
li a:hover::after {
   transform: translate(2px, -2px) !important;
}

/* Esclusione per i link che contengono immagini */
p a:has(img)::after, 
li a:has(img)::after {
   content: "" !important;
   display: none !important;
}

Variante "Bold": Base Rossa e Freccia Grigia

Se volete che l'icona non sia solo un dettaglio, ma un vero e proprio segnale visivo che attira l'attenzione sul link, potete optare per la versione invertita. In questo caso, la struttura esterna si tinge del mio rosso vibrante, mentre la freccia diventa grigio profondo.

È una scelta più audace, perfetta per sezioni cruciali del blog dove il click è l'obiettivo principale.

Il Codice CSS (Versione Inverted)

p a::after, 
li a::after {
   content: "" !important; 
   display: inline-block !important;
   width: 0.9em !important;  
   height: 0.9em !important;
   
   /* SPAZIATURA BILANCIATA */
   margin-left: 0.25em !important; 
   margin-right: 0.45em !important; 
   
   /* Allineamento verticale millimetrico */
   vertical-align: -0.1em !important; 
   
   /* SVG Bicolor: Base #4D4D4D e Freccia #FC6167 */
   background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><g><path d="M400 320h32a16 16 0 0 1 16 16v128a48 48 0 0 1-48 48H48a48 48 0 0 1-48-48V112a48 48 0 0 1 48-48h160a16 16 0 0 1 16 16v32a16 16 0 0 1-16 16H64v320h320V336a16 16 0 0 1 16-16z" fill="%23FC6167"></path><path d="M512 24v128c0 21.47-26 32-41 17l-35.71-35.71L191.8 376.77a24 24 0 0 1-33.94 0l-22.63-22.63a24 24 0 0 1 0-33.94L378.76 76.68 343.05 41C328 25.9 338.66 0 360 0h128a24 24 0 0 1 24 24z" fill="%234D4D4D"></path></g></svg>') !important;
   
   background-repeat: no-repeat !important;
   background-size: contain !important;
   
   /* Animazione fluida all'hover */
   transition: all 0.3s ease !important; 
   transform: translate(0, 0) !important; 
}

/* Effetto Hover */
p a:hover::after, 
li a:hover::after {
   transform: translate(2px, -2px) !important;
}

/* Esclusione per i link che contengono immagini */
p a:has(img)::after, 
li a:has(img)::after {
   content: "" !important;
   display: none !important;
}

Quale scegliere?

La scelta tra la versione Original (più discreta) e questa Inverted (più energica) dipende dal carattere che volete dare al vostro articolo. Su gianluca.online amo alternarle a seconda del contesto, mantenendo però sempre la coerenza cromatica che definisce il mio stile.