如何将文字行放在图片标签下？

Question

我想将线放置在image标签下，如下图所示，但伪元素不适用于<img>标签

这是我在Codepen中的代码：

码

希望任何人都能帮助我。 预先感谢。

Answer 1

如果所有其他方法均失败，请尝试创建表并将文本插入图像下方的行中。 您可能必须修改text-align才能以所需的方式显示它。

Answer 2

从CSS选择器3级

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

因此， ::before和::after将仅对具有内容的元素起作用，而对input ， br ，其他元素和img不起作用。

就像有人说的那样，将您的图片包装在另一个元素， div或您喜欢的任何内容中，然后通过CSS将其应用于任何伪元素。

注意如果文本是重要的，非装饰性的，则不应为此使用伪元素。

Answer 3

可以使用纯的CSS破解的<hr>标签，使其垂直： 实施例小提琴

的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>标签的位置。