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:
Hope anyone can help me out. Thank in advance.
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.
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.
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.