Pseudoelement：后父DIV成分的变化大小

Question

我想这样的创造空间：

.gallery-item{ 
 
    \t overflow: hidden;} 
 

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

 
    \t img{ 
 
    \t \t 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"> 
 
    \t \t <img src="https://s-media-cache-ak0.pinimg.com/736x/c2/0b/2a/c20b2a893ad6d1d29764416207c8b885--sahara-marocain-morocco.jpg"> 
 
    \t </div> \t 
 
    \t <div class="col-md-4 gallery-item"> 
 
    \t \t <img src="https://s-media-cache-ak0.pinimg.com/736x/c2/0b/2a/c20b2a893ad6d1d29764416207c8b885--sahara-marocain-morocco.jpg"> 
 
    \t </div> \t 
 
    \t <div class="col-md-4 gallery-item"> 
 
    \t \t <img src="https://s-media-cache-ak0.pinimg.com/736x/c2/0b/2a/c20b2a893ad6d1d29764416207c8b885--sahara-marocain-morocco.jpg"> 
 
    \t </div> \t 
 
    </div>

我创建：一些文字后，但该元素改变大小的父项.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)