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

This example doesn’t hide the arrow if the content is too small, but it does allow for the content to be expanded and read when it overflows.

.outer{
  border: 2px solid red;
  margin: 1em auto;
  width: 350px;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
}

.inner{
  border: 1px solid gray;
  padding: 0.5em 2ch;
  max-height: 8em;
  min-height: 8em;
  overflow: hidden;
  box-shadow: 0 -0.5em 0.5em gray inset;
  transition: max-height 0.25s ease-in-out;
}

p{
  margin-top: 0;
}

label{
  margin: 0 auto;
  transform: rotate(90deg);
  transition: transform 0.25s ease-in-out;
}

.arrow{
  margin: 0 auto;
  display: none;
}

.arrow:checked + label{
  transform: rotate(-90deg);
  transition: transform 0.5s ease-in-out;
}

.arrow:checked + label + .inner{
  max-height: 25em;
  transition: max-height 0.5s ease-in-out;
}

<div class="outer">
  <input class="arrow" id="arrow" type="checkbox" />
  <label for="arrow">▶</label>
  <div class="inner">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est impedit fugit quasi dignissimos, itaque labore culpa, maiores sit optio officiis sapiente odit id repellendus accusamus nihil consequatur praesentium possimus dicta! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid quos voluptas beatae nesciunt tenetur. Quas iste, odit sapiente facere vitae, tenetur soluta fuga odio perspiciatis unde blanditiis, voluptatum, doloremque suscipit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis eius, voluptatum, architecto consectetur eaque quisquam possimus tenetur sunt quibusdam dolorem enim eum! Atque, at vel officia, non ipsa a unde!</p>
  </div>
</div>

<div class="outer">
  <input class="arrow" id="arrow2" type="checkbox" />
  <label for="arrow2">▶</label>
  <div class="inner">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est impedit fugit quasi dignissimos.</p>
  </div>
</div>

Answer 2

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>