Positon css border under text and under image

Question

So I'm trying to get this effect with the border under the text and image.

My code so far looks like this:

html:

<div class="grid-child" id="imageContainer">
     <div class="borderImage"></div>
     <img src="src" border="0" />
</div>

css:

.borderImage {
  position: absolute;
  width: 600px;
  height: 450px;
  z-index: -1; // just makes the border disappear.
}

.borderImage:after {
  content: '';
  position: absolute;
  top: 15%;
  left: -36%;
  width: 35%;
  height: 100%;
  border-top: 4px solid #cccccc;
  border-left: 4px solid #cccccc;
  border-bottom: 4px solid #cccccc;
}

Answer 1

Try this

#imageContainer {
  height: 800px;
}

img {
  position: absolute;
  top: 10%;
  right: 15%;
}

.borderImage {
  position: absolute;
  width: 600px;
  height: 400px;
  z-index: -1; // just makes the border disappear.
}

.borderImage:after {
  content: '';
  position: absolute;
  top: 20%;
  right: 25%;
  width: 35%;
  height: 100%;
  width: 300px;
  border-top: 4px solid #cccccc;
  border-left: 4px solid #cccccc;
  border-bottom: 4px solid #cccccc;
  border-right: 4px solid #cccccc;
}

and check the example i made in jsfiddle:

https://jsfiddle.net/LaKhDaR/auewovfr/118/