Show down arrow if child overflows parent - CSS only

Question

I have CSS problem and I am wondering wether it is possible. This case is simple but is really complicated and probably can be only done with a good CSS hack or trick.

I need to show an arrow if the text in the child element is higher than it's parent element. I cannot use JavaScript in any form, only CSS.

Arrow can be anything, it can be a div element, a background-image or anything else because it doesn't have to do anything. Arrow should not be visible if the child size is smaller than parrent size.

HTML structure is example and if you have different idea I'm open minded.

I didn't put any code because I was not able to achieve this in any way.

Answer 1

Made this quick example, it relies on the z-index properties and 2 pseudo elements.

• The before pseudo element is used to make the arrow at the bottom, it is absolutely positioned
• the after pseudo element is stacked over the arrow but stays below the content
• when the content is higher than the parent, the after pseudo element is pushed under the arrow and doesn't hide it anymore

Here is an example:

.wrap{
  position:relative;
  width:500px;
  height:150px;
  border:1px solid red;
  overflow:hidden;
  background:#fff;
}
.wrap:after{
  content:'';
  display:block;
  position:relative;
  height:inherit;
  background:inherit;
  z-index:2;
}
.wrap:before{
  content:'\25BC';
  position:absolute;
  left:0; bottom:0;
  width:100%; height:1.2em;
  line-height:1.2em;
  background:rgba(255,255,255,0.8);
  text-align:center;
  z-index:1;
}

<div class="wrap">
  <div class="child">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ut nulla hendrerit, scelerisque enim quis, feugiat lacus. Donec massa urna, faucibus at erat vel, auctor egestas risus. Etiam vitae urna sed urna vehicula lobortis. Nunc dapibus, neque vel consectetur lobortis, augue lorem gravida nunc, nec lacinia nunc lectus sit amet tellus. Sed efficitur urna risus. Mauris varius, est in vehicula dapibus, felis nunc convallis libero, at lacinia risus felis id libero. Sed elit ipsum, interdum at lorem vel, laoreet tristique ante. Praesent lectus mauris, finibus ut gravida sed, pulvinar quis orci.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ut nulla hendrerit, scelerisque enim quis, feugiat lacus. Donec massa urna, faucibus at erat vel, auctor egestas risus. Etiam vitae urna sed urna vehicula lobortis. Nunc dapibus, neque vel consectetur lobortis, augue lorem gravida nunc, nec lacinia nunc lectus sit amet tellus. Sed efficitur urna risus. Mauris varius, est in vehicula dapibus, felis nunc convallis libero, at lacinia risus felis id libero. Sed elit ipsum, interdum at lorem vel, laoreet tristique ante. Praesent lectus mauris, finibus ut gravida sed, pulvinar quis orci.</div>
</div>
<div class="wrap">
  <div class="child">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ut nulla hendrerit, scelerisque enim quis, feugiat lacus. Donec massa urna, faucibus at erat vel, auctor egestas risus. Etiam vitae urna sed urna vehicula lobortis. Nunc dapibus, neque vel consectetur lobortis, augue lorem gravida nunc, nec lacinia nunc lectus sit amet tellus. Sed efficitur urna risus. Mauris varius, est in vehicula dapibus. Sed efficitur urna risus. Mauris varius, est in vehicula dapibus.Sed efficitur urna risus. Mauris varius, est in vehicula dapibus .</div>
</div>