EDGE 1.0

CROSSPUTT日本公式HP｜クロスパット Verified independent store

→

アコーディオンのデザイン 下線だけのシンプルなアコーディオンメニュー。クセがなくどんなサイトでも使いやすいのが特徴です。 アコーディオンのデザイン 下線だけのシンプルなアコーディオンメニュー。クセがなくどんなサイトでも使いやすいのが特徴です。 .accordion-003 { max-width: 500px; margin-bottom: 7px; bor der-bottom: 2px solid #d0d0d0; } .accordion-003 summary { display: flex; justify-content: space-between; align-items: center; position: relative; padding: 1em 2em; color: #333333; font-weight: 600; cursor: pointer; } .accordion-003 summary::-webkit-details-marker { display: none; } .accordion-003 summary::before, .accordion-003 summary::after { width: 3px; height: .9em; border-radius: 5px; background-color: #333333b3; content: ''; } .accordion-003 summary::before { position: absolute; right: 2em; rotate: 90deg; } .accordion-003 summary::after { transition: rotate .3s; } .accordion-003[open] summary::after { rotate: 90deg; } .accordion-003 p { transform: translateY(-10px); opacity: 0; margin: 0; padding: .3em 2em 1.5em; color: #333333; transition: transform .5s, opacity .5s; } .accordion-003[open] p { transform: none; opacity: 1; } Show more