Disegnare una Freccia con Pseudo-elementi CSS

Mentre stavo lavorando sull'area personale aperta di recente, è sorta la necessità di aggiungere una freccia ad un link di ritorno senza che venissero apportate modifiche al markup, principalmente perché non ne avevo il controllo. La soluzione si è presentata in modo del tutto naturale: usare gli pseudo-elementi ::before e ::after per disegnare rispettivamente la punta e l'asta della freccia.

Inutile dirti che il risultato è stato appagante. Quanto segue ne è uno screenshot:

Styling Preliminare

Come anticipato, tutto lo styling gravita attorno ad un singolo tag, un tag <a>, quindi il markup è davvero minimalista:

1<a class="go-back">Go Back</a>

E il CSS di base non è altrimenti:

1.go-back {
2  color: #c16b00;
3  font-size: 16px;
4  font-weight: 600;
5  font-family: 'Open Sans', sans-serif;
6
7  /**
8    * If you set it to a value higher than the 'font-size', 
9    * you will have to take account of the difference 
10    * between the 'line-height' and the 'font-size' 
11    * to vertically centre the arrow 
12    * and align it with the text.
13    **/
14  line-height: 1;
15
16  /* Makes some place for the arrow */
17  padding-left: 15px;
18
19  /* The arrow will be absolutely positioned */
20  position: relative;
21}

La Punta

Immagina un quadrato trasparente con un bordo solo lungo due lati adiacenti. Ora immagina di ruotare il quadrato in modo che l'angolo visibile punti ad ovest. Ecco che hai in mente la punta di una freccia orientata verso sinistra:

1.go-back::before {
2  border-color: #c16b00;
3  border-style: solid;
4  border-width: 0 0 2px 2px;
5  content: "";
6  display: block;
7  height: 6px;
8  left: 0px;
9  position: absolute;
10  width: 6px;
11
12  /**
13   * These two lines vertically centre 
14   * the point of the arrow
15   */
16  margin-top: -3px;
17  top: 50%;
18
19  /**
20   * The arrow sprints to the left 
21   * when the link is hovered
22   */
23  transition: left 0.1s;
24
25  transform: rotate( 45deg );
26  -webkit-transform: rotate( 45deg );
27}

L'asta

L'asta della nostra freccia è un semplice segmento, quindi ci occorre solo disegnare un rettangolo orizzontale, dargli un colore di sfondo, e posizionarlo in armomia con la punta disegnata poc'anzi:

1.go-back::after {
2  background: #c16b00;
3  content: "";
4  display: block;
5  height: 2px;
6  left: 0px;
7  position: absolute;
8  top: 50%;
9  width: 11px;
10
11  /**
12   * We need to animate the shaft too, 
13   * to be able to look at a moving arrow
14   */
15  transition: left 0.1s;
16}

Giusto per lasciare poco all'immaginazione:

Hai notato il quadrato azzurro? È una rappresentazione dello pseudo-elemento ::before, l'elemento che con il suo bordo da 2px di spessore veste il ruolo della punta della freccia.

Manca Qualcosa

Il disegno è completo, la freccia è visibile, ma posizionando il puntatore sopra il link non accade nulla. Questo perché gli ingredienti per uno stato :hover non ci sono tutti, ancora. Abbiamo bisogno di una regola finale:

1.go-back:hover::before,
2.go-back:hover::after {
3  left: -3px;
4}

L'intera Cascata

1.go-back {
2  color: #c16b00;
3  font-family: 'Open Sans', sans-serif;
4  font-size: 16px;
5  font-weight: 600;
6  line-height: 1;
7  padding-left: 15px;
8  position: relative;
9}
10.go-back::before,
11.go-back::after {
12  content: "";
13  display: block;
14  left: 0px;
15  position: absolute;
16  top: 50%;
17  transition: left 0.1s;
18}
19.go-back::before {
20  border-color: #c16b00;
21  border-style: solid;
22  border-width: 0 0 2px 2px;
23  height: 6px;
24  margin-top: -3px;
25  width: 6px;
26
27  transform: rotate( 45deg );
28  -webkit-transform: rotate( 45deg );
29}
30.go-back::after {
31  background: #c16b00;
32  height: 2px;
33  width: 11px;
34}
35.go-back:hover::before,
36.go-back:hover::after {
37  left: -3px;
38}

Il mio obiettivo nello scrivere questo codice era quello di disegnare una freccia di ritorno senza fronzoli e senza dover ricorrere a JavaScript, siccome nel mio caso solo con JavaScript avrei potuto inserire un tag figlio nel tag <a>. Perché un tag figlio? Perché se volessimo aggiungere alla freccia un box-shadow, o più in generale, applicare dello styling più complesso, ne avremmo definitivamente bisogno. In tal caso infatti, la freccia prenderebbe forma dalla combinazione di tre segmenti: due, gli pseudo-elementi del tag figlio, formerebbero la punta, invece il terzo, il tag figlio stesso, fungerebbe da asta.