css - 在 css 伪元素中转换内容

Question

我正在尝试将三 Angular 形添加到 div 以创建某种对话泡泡。那个泡泡应该有影子。我发现你可以使用 unicode 并将其混合到一个伪元素中来创建一个三 Angular 形。现在我有点困惑如何缩放 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 边框箭头“hack”怎么样(请参阅下面带有扩展示例的代码笔链接):

.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