<section><h1id="one"> メニュー1</h1><ulclass="menu"id="open-menu"><li>中身1</li><li>中身2</li><li>中身3</li></ul></section>ulなどは、関係ない要素だが、日常で使う場合はアコーディオンメニューなどで
使うことが多いと予想されるため記載
続いてCSS
/* 記号＞ */section>h1::before{content:'';width:4px;height:4px;border:0;border-right:2pxsolidblack;border-bottom:2pxsolidblack;transform:rotate(45deg);position:absolute;margin-top:15px;}/* クリックした際に上向きにする */.up::before{content:'';width:4px;height:4px;border:0;border-right:2pxsolidblack;border-bottom:2pxsolidblack;transform:rotate(-135deg);position:absolute;margin-top:15px;}まず、疑似要素で＞の記号を作る。
その後、jsでクリックした際に、section > h1::beforeに.up::beforeが
つくようなCSSを用意する。
constclickone=document.getElementById('one');clickone.addEventListener('click',()=>{clickone.classList.toggle('up');});まず、h1要素を取得して、そのh1(clickone)をクリックした場合に
.up::beforeがCSSにつくようにする