如何将 css3 比例应用于元素的首字母伪元素？答案

【问题标题】：How can I apply css3 scale to an element's first-letter pseudo-element?如何将 css3 比例应用于元素的首字母伪元素？
【发布时间】：2011-09-28 11:42:47
【问题描述】：

我有一个带有首字母伪规则的段落标签。我想将比例规则应用于第一个字母，但它似乎不起作用。

首字母伪元素是否支持css3缩放？

<p>This is some Text</p>
<p>This is some more Text</p>

p:first-child:first-letter { font-family: "Baskerville"; font-size: 60px; -webkit-transform: scaleX(.8); display: inline-block; }

【问题讨论】：

为什么这个问题有 3 票反对？我看不出它有什么不清楚或没用的地方。
我根本想不通。 IMO 的问题没有任何问题。
看看我更新的答案

标签： html css scale

【解决方案1】：

工作正常here，您确定使用 Webkit 浏览器查看结果？

更新：这确实有效：http://jsfiddle.net/szXHZ/5/

你必须浮动元素，你必须将显示设置为阻塞！！

您将不得不稍微弄乱一下样式，因为它看起来有点暴躁（更改行高以获得更好的外观，并且可能会删除我在第二段中添加的清晰），但转换确实有效悬停时。你可以改变它，这样你就不需要悬停，如果你愿意的话..

【讨论】：

我在 Mac 和 PC 上的 Chrome 14 和 Safari 5.1 中查看过它...不，不能扩展到 0.8。
@BoltCock，很奇怪，我上传了一张我看到的照片。也许这是一个平台错误？我在 Ubuntu 上，它在 Chrome、Chromium 和 FF 上都很好——都是最新的版本
好的，我想我看到了问题，忽略我的回答，你是对的，它不是缩放，我这里有错误的想法
不，它运作良好。打开它 jsfiddle.net/sP3JZ/4 问题是.8

【解决方案2】：

试试这个。

<p><span class="firstletter">T</span>his is some Text</p>

.firstletter { font-family: "Baskerville"; -webkit-transform: scale(2); display: inline-block; }

现在可以了。 http://jsfiddle.net/sP3JZ/7/

【讨论】：

我没有投反对票，但我不喜欢回答“X 支持这个吗？”的答案。用“做 Y”。也就是说，您确实提供了一个可行的替代方案，这就是我没有投反对票的原因。
@BoltClock 你没看到“但它似乎不起作用。”？我为这个问题提出了另一种可行的解决方案。我的回答有什么问题？
@stephenmurdoch 我的回答有什么问题？这是我的工作解决方案。您也可以借助简单的函数在动态页面上应用此规则
如果您删除“font-size: 60px”，您的代码和我的代码一样不起作用-这是您的代码中删除了字体大小的 js fiddle：jsfiddle.net/sP3JZ-我认为 scale仅适用于悬停，当应用于首字母时，悬停似乎不起作用
我建议我的解决方案是候选答案