Imprimir texto dentro de html si algo coincide con JavaScript

Tengo un código similar a:

.competition{
  background-size: 48px;
}
.team1{
  background-image:url(https://api.sofascore.com/api/v1/unique-tournament/16/image);
  background-repeat:no-repeat;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<img width="48" src="https://i.ibb.co/w0qg9JF/trans.png" alt="" class="img-fluid competition team1">

Ejemplo en Codepen

¿Hay alguna manera de utilizar JavaScript para que me imprima algo de texto justo debajo de la imagen?

Es decir.

Al tener: class="img-fluid competition team1">

Mediante la clase “team1” escribir como texto (debajo de la imagen): “Equipo 1”

Y hacerlo así para varios elementos.