如何为 p 标签中的星号第一个字符着色

Posted 2023-03-06

【中文标题】如何为 p 标签中的星号第一个字符着色

【英文标题】：How to color the asterix first character in a p tag

【发布时间】：2013-07-24 00:36:02

【问题描述】：

我认为使用 ::first-letter 伪元素会很容易，但它不起作用！

我有

<p>* Required Fields</p>

我希望 * 是红色的！

有什么想法吗？请注意，我无法更改 html。

http://jsfiddle.net/3ducS/

【问题讨论】：

您确定不应该使用li 元素吗？

“不起作用”不是对问题的非常有用的描述。是不是特定的浏览器有问题？

您真的希望 HTML 页面中的 all 标记为 p 的元素的首字母为红色吗？如果不是，你有什么标准来区分这个和其他的？

有趣..... jsfiddle.net/TBAaE/4

The first letter of an element is not necessarily trivial to identify

【参考方案1】：

我几乎有一个解决方案（好吧，你可能会认为它是一个解决方案）并且它适用于你的 HTML：

p::before 
    content:'*';
    position:absolute;
    color: red;
    text-shadow: 0 0 1px red;

Demonstration

我在IE上启动了一个虚拟机测试，看起来不错：

【讨论】：

非常有创意的解决方案。可能是唯一可能的——我刚刚浏览了整个level 4 spec，其中包含一长串来自级别（1-4）的所有选择器，在任何一个中都不可能。也许有一天会延长。

@Neal 不同之处在于我的解决方案适用于 OP HTML。绝对定位使得 * 被绘制在同一位置。

@Brewal 因此是“几乎”。

@Benjamin：如果选择器规范有任何变化，那就是::first-letter，但我怀疑它是否会改变。如果引入了新的伪元素，它可能会在选择器之外。

用 1px 红色阴影来确保我们看不到任何黑色怎么样？