如何將效果應用於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