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

Question

I want to put the line under the image tag as image below but pseudo-elements doesn't work with <img> tag

Here is my code in codepen:

Code

Hope anyone can help me out. Thank in advance.

Answer 1

If all else fails, try creating a table and inserting the text in the rows beneath the image. You may have to modify text-align to display it how you want.

Answer 2

From CSS Selectors Level 3

The ::before and ::after pseudo-elements can be used to describe generated content before or after an element's content.

So, ::before and ::after will just work on elements which have a content and not work on input , br , others and also not img .

As someone said, wrap your image inside another element, a div or whatever you like, and apply it any pseudo-element via CSS.

Note If the text is important, non-decorative, you should not use a pseudo-element for that.

Answer 3

You can use pure css to hack the <hr> tag to make it vertical: 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>

I didn't adjust the z-index so you could see how the <hr> tag was positioned.