伪元素：更改父 div 组件的大小后答案

【问题标题】：Pseudoelement :after changes size of parent div component伪元素：更改父 div 组件的大小后
【发布时间】：2017-07-28 14:53:41
【问题描述】：

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

 .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 的大小。我不知道如何避免它。

【问题讨论】：

你试过position:absolute而不是relative吗？

标签： html css sass pseudo-element

【解决方案1】：

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

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

【讨论】：