アコーディオンの中身をチラ見せしたい

Question

bootstrapのaccordionを使用して、閉じている状態でもアコーディオンの中身を開閉ボタンの上部からチラリと覗かせるようにしたいです。

<div class="accordion" id="accordionExample">
    <div class="accordion-item">
        <div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
            <div class="accordion-body">
                <article>
                    <table border="1" class="table_1">
                        <tr>
                            <th>基本料</th>
                            <td>123,456,789円</td>
                        </tr>
                        <tr>
                            <th>データ容量</th>
                            <td>20TB+「テラフリー」</td>
                        </tr>
                        <tr>
                            <th>通話料</th>
                            <td>4321円（税込）/30秒</td>
                        </tr>
                    </table>
                    <table border="1" class="table_2">
                       
                       // 割愛

                    </table>
                    <table border="1"  class="table_3">
                        
                        // 割愛

                    </table>
                </article>
            </div>
        </div>
        <h2 class="accordion-header" id="headingOne">
            <button class="accordion-button" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
                <img src="../images/*********************.png" 
                alt="ほげほげボタン" />
            </button>
        </h2>
    </div>
</div>

上記のhtmlの中で、table_1の一行目くらいまでがちらりと顔を出すようにしたいのですが、閉じている状態だとそもそも中身が表示されません（当たり前かもしれませんが）。

.accordion-item{
    position: relative;

    h2{
        background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, white 50%, white 100%);
        position: absolute;
        top: 3rem;
        bottom: auto;
        width: 100%;;
        
        button{
            background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, white 50%, white 100%);
            border: none;
            outline: none;
            width: 65%;
            cursor: pointer;
        }
    } 

}

スタイルは現在このように記述していますが、例えばこの開閉ボタンに対するposition-relativeの対象を一つ上の .accordion にしてみたり、 閉じている.accordion-itemに対して強制的に幅と高さを指定してみたりしましたが、それでも中身が閉じた状態では表示されることはありませんでした。
どのようにすれば、ボタンの上に中身がちらりと表示されるようになるでしょうか。

ご教示いただけたら幸いです。

Answer 1

ちょっと詳細がよくわからないですが、こんな感じでしょうか？

https://jsfiddle.net/Lhankor_Mhy/a6qryj8s/

        .collapse:not(.show) {
            display: block !important;
            height: 4rem;
            overflow: hidden;
        }

Comments

[of_the_Europa]

ありがとうございます m(__)m

https://gyazo.com/bcd9f8c524df16f9579d611cf463af45
おかげで希望通りに実現できました。
正直、not疑似要素というものを知らなかったです。.collapseも、使いどころをもう少し理解していればこんなに苦労はしなかったと思います。
おかげで生き返りました。

コードのシェアもありがとうございます。