Atualmente estou com dificuldades de fazer um simples quadrado tipo esse:

Pois se trata da junção de uma palavra com um pseudo-elemento ::before, porém a imagem não aparece:

Código:

HTML:

teste 123

CSS:

.imagem{ display: flex; flex-flow: column nowrap; align-items: center;

width: 5%;
margin: auto;

}

.imagem_pseudo{ display: flex; align-items: center; justify-content: center;

width: 100%;
height: 500px;

}

.imagem_pseudo_link{ width: 30%; height: 300px; }

.imagem_pseudo_link::before{ background-image: url(./Baby_Yoda.jpg); }