Question

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

Answer 1

您应该在伪元素::上使用position: absolute;，因此它不会影响父元素。

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

Pseudoelement：更改父div组件的大小后

1 个答案: