position a fixed/absolute pseudoelement inside relative div (which have a scroll) always at the bottom (gradient transparent)

❌ this isn't what I want, since it didn't stick to the end, and didn't stay fixed.

(the pseudoelement is a gradient of white and transparent)

✅ this is what I want, and is correct only at the start when I never scrolled :(

(the pseudoelement is a gradient of white and transparent)

I tried absolute, fixed, and also sticky... nothing helps but absolute is correct only at the start when we didn't scroll, but when scrolling the ::before will start to follow the scrollbar which isn't what I want... I want that the ::before staying at the bottom every time (fixed doesn't help because it will go outside the <div> and follow maybe the <body>)

I can't change the structure, since I need to use ::before or ::after, but not create a new div, but I can use whatever CSS you suggest to me

I thought is a simple problem since fixed can solve it, but turn out is very hard, and fixed never work :( (I tried also to see on StackOverflow like 10 questions, and nothing helps)

The purpose is to show a little gradient at the end of the div...

Demo:

just try the demo below to see the bug:

div {
  position: relative;
  width: 300px;
  height: 70vh;
  padding: 1rem;
  border: 2px solid red;
  overflow: auto;
  border-radius: 1rem;
}

div::before {
  content: "";
  position: absolute;
  /* I tried also with fixed, but it goes outside the div :( */
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40%;
  background-image: linear-gradient(to top, white, transparent);
   /*outline: 5px solid blue;*/ /* if you can't see the gradient, uncommnet this line */ 
}

<div>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Non sint praesentium quod, perferendis nesciunt, cumque exercitationem magni officiis aliquid, a dolor omnis dolore placeat fugiat consequatur. Fugit repudiandae porro id! Error voluptas, aspernatur
  magni sapiente ducimus illo maiores repellat voluptatibus consectetur aut atque unde eveniet excepturi nam, ipsum at. Labore saepe ab ex beatae libero autem. A expedita corporis placeat? Eos eum nobis excepturi delectus enim autem, vitae ea mollitia,
  soluta sequi nihil, officiis iusto quos sunt omnis perspiciatis consequuntur aliquam impedit voluptates. Odit, aperiam facere et inventore dicta distinctio. Corrupti consectetur, tempore nihil voluptates minus odio, vitae facilis eveniet quos officiis
  architecto ipsum libero cupiditate aut. Sapiente doloribus aperiam libero laborum, accusamus ipsum et est tenetur voluptate iure dolorum. Sit quae dolor maxime assumenda quam, fuga id soluta aliquam reprehenderit vitae. Consequuntur ducimus, deleniti
  animi excepturi repudiandae pariatur assumenda neque? Impedit tempore neque odio a, excepturi maiores rerum porro! Lorem ipsum dolor sit amet consectetur adipisicing elit. Non sint praesentium quod, perferendis nesciunt, cumque exercitationem magni
  officiis aliquid, a dolor omnis dolore placeat fugiat consequatur. Fugit repudiandae porro id! Error voluptas, aspernatur magni sapiente ducimus illo maiores repellat voluptatibus consectetur aut atque unde eveniet excepturi nam, ipsum at. Labore saepe
  ab ex beatae libero autem. A expedita corporis placeat? Eos eum nobis excepturi delectus enim autem, vitae ea mollitia, soluta sequi nihil, officiis iusto quos sunt omnis perspiciatis consequuntur aliquam impedit voluptates. Odit, aperiam facere et
  inventore dicta distinctio. Corrupti consectetur, tempore nihil voluptates minus odio, vitae facilis eveniet quos officiis architecto ipsum libero cupiditate aut. Sapiente doloribus aperiam libero laborum, accusamus ipsum et est tenetur voluptate iure
  dolorum. Sit quae dolor maxime assumenda quam, fuga id soluta aliquam reprehenderit vitae. Consequuntur ducimus, deleniti animi excepturi repudiandae pariatur assumenda neque? Impedit tempore neque odio a, excepturi maiores rerum porro! Lorem ipsum
  dolor sit amet consectetur adipisicing elit. Non sint praesentium quod, perferendis nesciunt, cumque exercitationem magni officiis aliquid, a dolor omnis dolore placeat fugiat consequatur. Fugit repudiandae porro id! Error voluptas, aspernatur magni
  sapiente ducimus illo maiores repellat voluptatibus consectetur aut atque unde eveniet excepturi nam, ipsum at. Labore saepe ab ex beatae libero autem. A expedita corporis placeat? Eos eum nobis excepturi delectus enim autem, vitae ea mollitia, soluta
  sequi nihil, officiis iusto quos sunt omnis perspiciatis consequuntur aliquam impedit voluptates. Odit, aperiam facere et inventore dicta distinctio. Corrupti consectetur, tempore nihil voluptates minus odio, vitae facilis eveniet quos officiis architecto
  ipsum libero cupiditate aut. Sapiente doloribus aperiam libero laborum, accusamus ipsum et est tenetur voluptate iure dolorum. Sit quae dolor maxime assumenda quam, fuga id soluta aliquam reprehenderit vitae. Consequuntur ducimus, deleniti animi excepturi
  repudiandae pariatur assumenda neque? Impedit tempore neque odio a, excepturi maiores rerum porro!
</div>

Solution

This snippet demonstrates a way of doing this using position sticky on the pseudo element.

However, it relies on knowing the height and padding of the element so works for your example code and may work in your particular use case, but isn't a totally general solution.

div {
  position: relative;
  width: 300px;
  height: 70vh;
  padding: 1rem;
  border: 2px solid red;
  overflow: auto;
  border-radius: 1rem;
}

div::before {
  content: "";
  position: sticky;
  display: block;
  top: 0;
  left: 0;
  margin-left: -1rem;
  width: 100%;
  height: calc(100% + 1rem);
  background-image: linear-gradient(to top, white, transparent);
  background-size: 100% 40%;
  background-repeat: no-repeat;
  background-position: left bottom;
  margin-top: calc(-70vh - 1rem);
}

<div>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Non sint praesentium quod, perferendis nesciunt, cumque exercitationem magni officiis aliquid, a dolor omnis dolore placeat fugiat consequatur. Fugit repudiandae porro id! Error voluptas, aspernatur
  magni sapiente ducimus illo maiores repellat voluptatibus consectetur aut atque unde eveniet excepturi nam, ipsum at. Labore saepe ab ex beatae libero autem. A expedita corporis placeat? Eos eum nobis excepturi delectus enim autem, vitae ea mollitia,
  soluta sequi nihil, officiis iusto quos sunt omnis perspiciatis consequuntur aliquam impedit voluptates. Odit, aperiam facere et inventore dicta distinctio. Corrupti consectetur, tempore nihil voluptates minus odio, vitae facilis eveniet quos officiis
  architecto ipsum libero cupiditate aut. Sapiente doloribus aperiam libero laborum, accusamus ipsum et est tenetur voluptate iure dolorum. Sit quae dolor maxime assumenda quam, fuga id soluta aliquam reprehenderit vitae. Consequuntur ducimus, deleniti
  animi excepturi repudiandae pariatur assumenda neque? Impedit tempore neque odio a, excepturi maiores rerum porro! Lorem ipsum dolor sit amet consectetur adipisicing elit. Non sint praesentium quod, perferendis nesciunt, cumque exercitationem magni
  officiis aliquid, a dolor omnis dolore placeat fugiat consequatur. Fugit repudiandae porro id! Error voluptas, aspernatur magni sapiente ducimus illo maiores repellat voluptatibus consectetur aut atque unde eveniet excepturi nam, ipsum at. Labore saepe
  ab ex beatae libero autem. A expedita corporis placeat? Eos eum nobis excepturi delectus enim autem, vitae ea mollitia, soluta sequi nihil, officiis iusto quos sunt omnis perspiciatis consequuntur aliquam impedit voluptates. Odit, aperiam facere et
  inventore dicta distinctio. Corrupti consectetur, tempore nihil voluptates minus odio, vitae facilis eveniet quos officiis architecto ipsum libero cupiditate aut. Sapiente doloribus aperiam libero laborum, accusamus ipsum et est tenetur voluptate iure
  dolorum. Sit quae dolor maxime assumenda quam, fuga id soluta aliquam reprehenderit vitae. Consequuntur ducimus, deleniti animi excepturi repudiandae pariatur assumenda neque? Impedit tempore neque odio a, excepturi maiores rerum porro! Lorem ipsum
  dolor sit amet consectetur adipisicing elit. Non sint praesentium quod, perferendis nesciunt, cumque exercitationem magni officiis aliquid, a dolor omnis dolore placeat fugiat consequatur. Fugit repudiandae porro id! Error voluptas, aspernatur magni
  sapiente ducimus illo maiores repellat voluptatibus consectetur aut atque unde eveniet excepturi nam, ipsum at. Labore saepe ab ex beatae libero autem. A expedita corporis placeat? Eos eum nobis excepturi delectus enim autem, vitae ea mollitia, soluta
  sequi nihil, officiis iusto quos sunt omnis perspiciatis consequuntur aliquam impedit voluptates. Odit, aperiam facere et inventore dicta distinctio. Corrupti consectetur, tempore nihil voluptates minus odio, vitae facilis eveniet quos officiis architecto
  ipsum libero cupiditate aut. Sapiente doloribus aperiam libero laborum, accusamus ipsum et est tenetur voluptate iure dolorum. Sit quae dolor maxime assumenda quam, fuga id soluta aliquam reprehenderit vitae. Consequuntur ducimus, deleniti animi excepturi
  repudiandae pariatur assumenda neque? Impedit tempore neque odio a, excepturi maiores rerum porro!
</div>