css image box with horizontal line on the right-CodePudding

After searching around for few hours, i hope someone can help me with this case.

I want to achieve this effect on multiple images accross a post. The html content is already created and i can't modify or add element to it. I can only play with css.

box with a horizontal line

Problem : Each image have different height size, meaning height can change depend of the image. Do i need to use Calc property?

figure.size-full {
  border: 2px solid #bcc6b4;
  padding: 0;
  }

.wp-block-image img {
  height: auto;
  max-width: 100%;
  vertical-align: bottom;
}

.wp-block-image figcaption {
  margin-top: .5em;
  margin-bottom: 1em;
  font-style: italic;
}

figure.wp-block-image:before{
width: 2000px;
height: 1px;
background-color: #bcc6b4;
display: block;
content: "";
position: relative;
top: 32px;
right: -100%;
z-index:-1;
}

<figure >
<img loading="lazy" src="vitamineA.jpg" alt="test image"  >
<figcaption>Aliments riches en vitamine A</figcaption>
</figure>

Thank you very much for your help

CodePudding user response：

You can try css flex. If it doesn't work as expected, increase the selector weight or make the properties as important.

figure.wp-block-image {
    display: flex;
    flex-direction: row;
    align-content: center;
    align-items: center;
}

CodePudding user response：

Ok finally with your help @JShobbyist, i think i managed to solve this issue and be able to adjust vertically the pseudo element for each image.

figure.wp-block-image{display: flex;justify-content: center;align-items: center;flex-direction:column}
figure.wp-block-image:before{width: 1500px;height: 1px;content: '';background-color: #bcc6b4;position:absolute;z-index:-1;right:-85%}