如何将文本行放在图像标记下？

Question

我想将图片标记下的行放在下面的图片中，但伪元素不适用于<img>标记

这是我在codepen中的代码：

Code

希望有人能帮助我。提前谢谢。

Answer 1

如果所有其他方法都失败了，请尝试创建一个表格并将文字插入图片下方的行中。您可能需要修改text-align以显示它的方式。

Answer 2

来自CSS Selectors Level 3

  

:: before和:: after伪元素可用于描述元素内容之前或之后生成的内容。

因此，::before和::after只适用于具有内容而不适用于input，br，其他人而非img的元素

正如有人所说，将你的图像包装在另一个元素div或你喜欢的任何元素中，然后通过CSS将它应用于任何伪元素。

注意如果文字很重要，不具有装饰性，则不应使用伪元素。

Answer 3

您可以使用纯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-index，因此您可以看到<hr>标记的定位方式。