Tienes que poner el elemento en posición absoluta y luego darle un ancho también (yo he puesto left:0
y right:0
que viene a ser parecido a width:100%
), sino no se verá. El elemento padre, en este caso .fondo.fondo
tiene que tener posición también para que sirva de referencia:
.fondo{
background:url("http://lorempixel.com/output/abstract-h-c-200-500-4.jpg");
background-size:cover;
width:200px;
height:500px;
color:white;
position:relative;
}
.fondo:before{
content:"";
display:block;
height:75%;
background:#000;
bottom:0;
position:absolute;
opacity: 0.4;
left:0;
right:0;
}
<div class="fondo">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus placeat alias aut sed, nihil ducimus sit. Saepe dolorum incidunt eligendi, accusamus repudiandae, harum a ipsam, hic fugiat quam quisquam et.</div>