如何将效果应用于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 
} 

查看更新后的EXAMPLE