<ul uk-accordion="multiple: true">
<li>
<a class="uk-accordion-title" href="#">項目１</a>
<div class="uk-accordion-content">項目１の中身です。</div>
</li>
<li>
<a class="uk-accordion-title" href="#">項目２</a>
<div class="uk-accordion-content">項目２の中身です。</div>
</li>
<li>
<a class="uk-accordion-title" href="#">項目３</a>
<div class="uk-accordion-content">項目３の中身です。</div>
</li>
</ul>ul {
li {
.uk-accordion-title {
position: relative;
&::before {
background-image: none;//デフォルト記号を非表示に
content: "\002B";//CSS用特殊記号に変換
color: red;
font-size: 20px;
background-color: lemonchiffon;
width: 28px;
height: 28px;
border-radius: 50%;
//上下中央揃え
display: flex;
justify-content: center;
line-height: 1.25;
position: absolute;
top: 50%;
transform:translateY(-50%);
right: 20px;
}
}
}
}
.uk-open {
>.uk-accordion-title {
&::before {
content: none;//プラスボタン非表示
}
&::after {
content: "\002212";//CSS用特殊記号に変換
color: red;
font-size: 20px;
background-color: lemonchiffon;
width: 28px;
height: 28px;
border-radius: 50%;
//上下中央揃え
display: flex;
justify-content: center;
line-height: 1.25;
position: absolute;
top: 50%;
transform:translateY(-50%);
right: 20px;
}
}
}