html - 伪元素 :after changes size of parent div component

Question

我正在尝试创建这样的画廊:

 .gallery-item{
    	overflow: hidden;}

    	.gallery-item:after{
    		content: "text ....";
    		position: relative;
    		display: block;
    		transform: translate(20px, -30px);}

    	img{
    		width: 100%}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
        <div class="col-md-4 gallery-item">
    		<img src="https://s-media-cache-ak0.pinimg.com/736x/c2/0b/2a/c20b2a893ad6d1d29764416207c8b885--sahara-marocain-morocco.jpg">
    	</div>	
    	<div class="col-md-4 gallery-item">
    		<img src="https://s-media-cache-ak0.pinimg.com/736x/c2/0b/2a/c20b2a893ad6d1d29764416207c8b885--sahara-marocain-morocco.jpg">
    	</div>	
    	<div class="col-md-4 gallery-item">
    		<img src="https://s-media-cache-ak0.pinimg.com/736x/c2/0b/2a/c20b2a893ad6d1d29764416207c8b885--sahara-marocain-morocco.jpg">
    	</div>	
    </div>

我用一些文本创建了 :after，但是这个元素改变了父 .gallery-item 的大小。我不知道如何避免它。

Answer 1

您应该在伪元素::after 上使用 position: absolute;，这样它就不会影响父元素。

.gallery-item
  overflow: hidden
  &:after
    content: "Content..."
    position: absolute;
    top: XXXX;
    left: XXXX;
    display: block
    transform: translate(20px, -30px)