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

Question

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

https://jsfiddle.net/tnfLc58h/

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

HTML

<div class="down-arrow">

</div>

CSS

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

编辑:我想让它响应。

Answer 1

由于伪元素是内联元素，因此需要给它提供display: inline-block (或block)，以便它响应宽度/高度设置(当然不是为了更改字体属性，正如一些注释所假设的那样)。

​

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

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

​

Answer 2

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

就像这样：

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

见更新的示例