如何將文字行放在圖片標簽下？

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>標簽的位置。