文本下方和图片下方的位置 css 边框

Question

所以我试图通过文本和图像下方的边框获得这种效果。

到目前为止，我的代码如下所示：

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

试试这个

#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;
}

并查看我在 jsfiddle 中制作的示例：

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

文本下方和图片下方的位置 css 边框

Positon css border under text and under image

html

css

css-position