Как поместить текстовую строку под тегом изображения?

Вы можете использовать чистый css для взлома <hr> чтобы сделать его вертикальным: Example Fiddle

CSS

.container{
    width: 200px;
}
.blue-box{
    width: 100px;
    height: 100px;
    background-color: blue;
    margin: 0 auto;
    margin-bottom: 20px;
}
hr.vertical{
    display: inline;
    float: left;
    height: 330px;
    position: absolute;
    left: 100px;
    border: 5px solid red;
    top: 0;
}

HTML

<div class="container">
    <div class="blue-box"></div>
    <div class="blue-box"></div>
    <div class="blue-box"></div>
    <hr class="vertical"/>
</div>

Я не регулировал индекс z, чтобы вы могли видеть, как был размещен тег <hr>.

Из CSS Selectors Level 3

Псевдо-элементы :: before и :: after могут использоваться для описания сгенерированного содержимого до или после содержимого элемента.

Итак, ::before and ::after будет работать только над элементами, которые имеют контент и не работают на input, br, другие, а также не img.

Как сказал кто-то, оберните изображение в другой элемент, div или что угодно, и примените к нему любой псевдоэлемент через CSS.

Примечание. Если текст является важным, не декоративным, вы не должны использовать для него псевдоэлемент.

Если все остальное не удается, попробуйте создать таблицу и вставить текст в строки под изображением. Возможно, вам придется изменить выравнивание текста, чтобы отобразить его, как вы хотите.