overflow-y-scroll导致:before伪元素无法显示，求解决办法

问题根源很明确：给元素加overflow-y: scroll后，元素会裁剪所有超出自身边界的内容，包括它的伪元素——你的:before定位在元素顶部外（-top-6），直接被滚动容器裁剪掉了。

你之前尝试用额外div包裹没解决，大概率是包裹方式不对，正确的做法是把伪元素转移到滚动容器的父元素上，让父元素负责定位伪元素，滚动容器只处理内容滚动：

修改后的代码示例 #

import fetcher from '../utils/fetcher';
import useSWR from 'swr';

function FollowerList({ url }) {
  const { data, error } = useSWR(url, fetcher);
  if (error) {
    return <p>error</p>;
  }
  if (!data || data.length === 0) {
    return <p>No Followers Found</p>;
  }
  return (
    {/* 新增父容器，承载伪元素，设为relative */}
    <div className="relative mb-6 before:content-['Followers'] before:absolute before:-top-6 before:left-0 before:bg-base-300 before:px-4 before:text-accent">
      {/* 滚动容器去掉relative和before相关样式，只保留滚动、背景等 */}
      <div className="bg-base-300 p-[1.25rem] rounded-md overflow-y-scroll space-y-4">
        {data.map((follower) => {
          return (
            <div key={follower.id} className='flex space-x-4'>
              <div className='avatar'>
                <div className='w-12 rounded-full'>
                  <img src={follower.avatar_url} />
                </div>
              </div>
              <div className='capitalize font-lato'>
                <h4 className='font-bold'>{follower.login}</h4>
                <a
                  href={follower.html_url}
                  target='_blank'
                  rel='noreferrer'
                  className='normal-case hover:text-accent transition-colors'
                >
                  {follower.html_url}
                </a>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

export default FollowerList;

关键调整点 #

1. 新增父容器并设置relative，作为伪元素的定位基准；
2. 滚动容器移除relative和所有:before相关样式，只保留overflow-y-scroll及内容样式；
3. 将伪元素的样式直接加在父容器上，让伪元素脱离滚动容器的裁剪范围。

备选方案（不修改结构） #

如果不想新增父容器，可以给滚动容器加足够的padding-top，让伪元素落在容器内部，同时调整top值为正数：

<div className="bg-base-300 p-[1.25rem] pt-[3.25rem] rounded-md relative before:content-['Followers'] before:absolute before:top-2 before:left-0 before:bg-base-300 before:px-4 before:text-accent overflow-y-scroll space-y-4">

这种方法的缺点是会占用滚动容器内部的顶部空间，不如父容器的方案灵活。

内容的提问来源于stack exchange，提问作者dscpp