CSS : アコーディオン２

アコーディオンの上に罫線を入れてみたパターン
details に with-topline のクラスを与える。
<!DOCTYPE html>
<html lang="ja">
<head>
    <title>アコーディオンに関する操作</title>

    <link rel='stylesheet' id='fontawsome-css' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css' type='text/css' media='all' />

    <style type="text/css">
/* ブラウザ初期化 */
* {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    font-size: 100%;
    vertical-align: baseline;
    box-sizing: border-box;
}

main {
    margin-top: 300px;
}

details.with-topline {
    position: relative;
    border-top: 3px solid #333;
}
details.with-topline::before {
    content: '';
    width: 100px;
    height: 3px;
    background-color: yellowgreen;
    border-right: 16px solid white;
    position: absolute;
    top: -3px;
}

/* デフォルトアイコン削除 */
summary {
    padding-top: 10px;
    display: block;
}
summary::-webkit-details-marker {
  display: none;
}
/* アイコン設定 */
.icon_plus::before {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
    padding-left: 1em;
    padding-right: .5em;
	content: "\f055";
}
/* アイコン設定 オープン時 */
details[open] summary.icon_plus::before {
	content: "\f056";
}
/* 表示内容 */
details div {
    padding: 1em 3em;
}

    </style>
</head>

<body>
    <main>
        <div>
            <details class="with-topline">
                <summary class="icon_plus">
                    概要
                </summary>
                <div>
                    折りたたまれている部分です。
                </div>
            </details>
        </div>
        
    </main>

</body>
</html>