如何对 CSS 中的 unicode 字符应用效果？

Question

如何使用 CSS 对此箭头应用各种效果，例如增加其大小等

到目前为止我已经能够改变它的颜色了。

HTML

<div class="down-arrow">

</div>

CSS

.down-arrow:after {
    content:'93';
    color: red;
    }

编辑：我想让它响应。

Answer 1

要增加内容的大小，您应该设置 font-size

像这样：

.down-arrow:after {
  content:'93';
  color: red;
  font-size: 20px; // change to whatever
 }

查看更新EXAMPLE

Answer 2

因为一个伪元素是一个内联元素，你需要给它 display: inline-block（或 block）来让它响应 width/height 设置（虽然不是只有当然可以更改字体属性，正如某些评论所假设的那样。

.down-arrow:after {
  content:'93';
  display: inline-block;    /*  or block  */
  background: lightgray;
  color: red;
  height: 32px;
  width: 40px;
  font-size: 24px;
  text-align: center;
}

<div class="down-arrow">
</div>

如何对 CSS 中的 unicode 字符应用效果？

How to apply effects to a unicode character in CSS?

html

css

frontend