2022-05-26 16:20:33 +00:00
---
id: 6153a3952facd25a83fe8083
title: Step 20
challengeType: 0
dashedName: step-20
---
# --description--
2022-10-06 14:49:26 +00:00
Lo pseudo-elemento `::after` crea un elemento che è l'ultimo figlio dell'elemento selezionato. Puoi utilizzarlo per aggiungere un elemento vuoto dopo l'ultima immagine. Se gli dai la stessa `width` delle immagini, l'ultima immagine si troverà a sinistra in un layout a due colonne. Ora è centrato perché hai impostato `justify-content: center` sul contenitore flex.
2022-05-26 16:20:33 +00:00
2022-08-02 11:46:54 +00:00
Esempio:
2022-05-26 16:20:33 +00:00
2022-08-02 11:46:54 +00:00
```CSS
.container::after {
content: "";
width: 860px;
}
2022-05-26 16:20:33 +00:00
```
2022-08-02 11:46:54 +00:00
Crea un nuovo selettore usando lo pseudo-elemento `::after` sull'elemento `.gallery` . Aggiungi una proprietà `content` impostata con la stringa vuota `""` e `350px` come valore della proprietà `width` .
2022-05-26 16:20:33 +00:00
2022-08-02 11:46:54 +00:00
# --hints--
2022-05-26 16:20:33 +00:00
2022-08-02 11:46:54 +00:00
Il selettore `.gallery::after` dovrebbe avere una stringa vuota `""` come valore della proprietà `content` .
2022-05-26 16:20:33 +00:00
```js
2022-08-02 11:46:54 +00:00
assert(new __helpers.CSSHelp(document).getStyle('.gallery::after')?.content === "\"\"");
2022-05-26 16:20:33 +00:00
```
2022-08-02 11:46:54 +00:00
Il selettore `.gallery::after` dovrebbe avere `350px` come valore della proprietà `width` .
2022-05-26 16:20:33 +00:00
```js
2022-08-02 11:46:54 +00:00
assert(new __helpers.CSSHelp(document).getStyle('.gallery::after')?.width === "350px");
2022-05-26 16:20:33 +00:00
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
2022-08-02 11:46:54 +00:00
< html lang = "en" >
2022-05-26 16:20:33 +00:00
< head >
< meta charset = "utf-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title > Photo Gallery< / title >
< link rel = "stylesheet" href = "./styles.css" >
< / head >
< body >
2022-08-02 11:46:54 +00:00
< header class = "header" >
< h1 > css flexbox photo gallery< / h1 >
< / header >
< div class = "gallery" >
< img src = "https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg" >
< img src = "https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg" >
< img src = "https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg" >
< img src = "https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg" >
< img src = "https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg" >
< img src = "https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg" >
< img src = "https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg" >
< img src = "https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg" >
< img src = "https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg" >
2022-05-26 16:20:33 +00:00
< / div >
< / body >
< / html >
```
```css
* {
box-sizing: border-box;
}
body {
margin: 0;
2022-08-02 11:46:54 +00:00
font-family: sans-serif;
background: #f5f6f7 ;
2022-05-26 16:20:33 +00:00
}
.header {
text-align: center;
2022-08-02 11:46:54 +00:00
text-transform: uppercase;
2022-05-26 16:20:33 +00:00
padding: 32px;
2022-08-02 11:46:54 +00:00
background-color: #0a0a23 ;
color: #fff ;
border-bottom: 4px solid #fdb347 ;
2022-05-26 16:20:33 +00:00
}
2022-08-02 11:46:54 +00:00
.gallery {
2022-05-26 16:20:33 +00:00
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
2022-08-02 11:46:54 +00:00
gap: 16px;
max-width: 1400px;
margin: 0 auto;
padding: 20px 10px;
2022-05-26 16:20:33 +00:00
}
2022-08-02 11:46:54 +00:00
.gallery img {
width: 100%;
max-width: 350px;
2022-05-26 16:20:33 +00:00
height: 300px;
object-fit: cover;
border-radius: 10px;
}
--fcc-editable-region--
--fcc-editable-region--
```
