CSS自动识别滚动溢出显示展开按钮实例页面

效果：

《HTML并不简单》是目前市面上唯一一本围绕HTML展开介绍Web前端开发的书籍，去粗取精，有的放矢。2024年7月出版，作者张鑫旭，382页，定价109元。

这本书的特点是独家，稀缺，作为业界少有的花大量时间研究与实践HTML的人，里面所呈现的知识是其他地方很难看到的。

代码：

CSS代码：

/* 无关紧要基础样式 */
section {
    border: 1px solid #ccc;
    max-height: 120px;
    overflow: hidden;
    position: relative;
}
label {
    position: absolute;
    inset-inline: 0; bottom: 0;
    height: 2em;
    --start-color: #0000;
    --end-color: #0002;
    background: url(arrow.svg) no-repeat 50% 100% / 1.5rem 1.5rem, linear-gradient(var(--start-color), var(--end-color));
    visibility: hidden;
}
label:has(:checked) {
    rotate: 180deg;
    --start-color: #0002;
    --end-color: #0000;
}
section:has(:checked) {
    max-height: none;    
}
/* 是否可滚动检测 */
section {
    --flag: false;
    animation: setFlag 1ms;
    scroll-timeline: --detectScroll;
    animation-timeline: --detectScroll;
}
@keyframes setFlag {
    from, to { --flag: true; }    
}
@container style(--flag: true) {
    label {
        visibility: visible;    
    }
}
section:has(:checked) label {
    visibility: visible;
}

HTML代码：

<section>
    <p>段落内容1...</p>
    <label><input type="checkbox" hidden></label>
</section>
<section>
    <p>段落内容1...</p>
    <p>段落内容2...</p>
    <label><input type="checkbox" hidden></label>
</section>