在CSS伪元素中转换内容

Question

我正在尝试在div上添加一个三角形来创建某种语音气泡。这个泡泡应该有一个影子。我发现你可以使用unicode并将它混合成一个伪元素来创建一个三角形。现在我对如何缩放Unicode字符有点困惑，因为它看起来有点奇怪。

...:after { 
content: "◀"; 
transform: scaleY(2.5); //doesnt seem to work :-(
top: 50px; 
left: -11px; 
position: absolute; 
text-shadow: -1px 0 2px #ccc; 
pointer-events: none; } 

感谢您对此的帮助。

Answer 1

原来的答案：您可以使用font-size伪元素，使文本大。只需添加font-size:2.5em;。

新想法：我知道这个问题是关于改变内容箭头，但为您的演讲泡沫的替代解决方案。有关使用CSS的边框箭头“黑客”（见下文W /扩展的例子，我codepen链接）什么：

.bubble:after { 
    content:""; 
    height:0px; 
    width:0px; 
    border-color: transparent transparent transparent #cccccc; 
    border-style: solid; 
    border-width: 10px; 
    position:absolute; 
    top:20px; 
    right:-20px; 
    /* Now transform will work since this is not a character: */ 
    -webkit-transform: scaleY(1.5); 
    transform: scaleY(1.5); 
} 

Codepen example

Answer 2

而不是使用：

transform: scaleY(...) 

您是否尝试过使用：

zoom:2.5; 

Here is the fiddle