如何更改 unicode 内容图标的颜色？

Question

我正在使用 content 属性以 unicode 形式附加一个加号图标。你如何设置这个图标的颜色？我试过使用颜色属性，但没有用。

    .accordion:after {
      content: '795'; /* Unicode character for "plus" sign (+) */
      font-size: 15px;
      color:#FFBC00;
      float: right;
      margin-left: 5px;
    }

    <button class="accordion">Section 2</button>
    <div class="panel">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>

Answer 1

解决方案是使用具有不同颜色变体的非粗加号。这是一个例子：https://unicode-table.com/en/002B/.

Answer 2

[=12=]2795 ➕^✻ is a bitmap I think and it can't be altered AFAIK. In the example below I used [=12=]ff0b ＋^✻可以指定颜色

^{✻ 搜索栏有一个错误，只需退格一次，它就会搜索。这仅适用于来自 link 的情况，但除此之外，它是一个很好的资源。}

:root {
  font: 2ch/1.25 'Segoe UI'
}

.accordion {
  display: inline-block;
  width: max-content;
  max-height: 40px;
  padding 0;
  border-radius: 6px;
  font-size: 1rem;
  font-weight: 900;
  vertical-align: sub;
  color: goldenrod;
  background: lightblue;
  cursor: pointer;
}

.accordion:hover,
.accordion:active {
  outline: 2px inset blue;
  color: navy;
  background: lightyellow;
}

.accordion::after {
  content: '[=10=]ff0b';
  display: inline-block;
  margin: -8px -8px 0 5px;
  font-size: 2rem;
  font-weight: 900;
  vertical-align: sub;
  color: goldenrod;
}

.accordion:hover::after,
.accordion:active::after {
  color: navy;
}

<button class="accordion">Section 2</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

如何更改 unicode 内容图标的颜色？

How do you change a unicode content icons color?

css

unicode