你的伪元素工作得很好。您面临的问题是Webkit引擎中一个已知的、10多年前未解决的错误，关于**::first-line不接受text-transform**。
这个bug已经被多次报告，但似乎没有任何解决方案。看看我发现的三个问题：

• https://bugs.chromium.org/p/chromium/issues/detail?id=142827
• https://bugs.chromium.org/p/chromium/issues/detail?id=129669
• https://bugs.webkit.org/show_bug.cgi?id=3409

p::first-line {
  color: red;
}

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

需要说明的是，**::first-line**接受的属性为：

• 字体属性
• 颜色特性
• 背景特性
• 字间距
• 字母间距
• 文字装饰
• 垂直对准
• 文本转换
• 行高
• 清除

有关**::first-line**的详细信息，请参阅this page。
注意：Chromium上的Bug 129669已于2017年9月26日修复。

显然::first-line和text-transform组合在webkit浏览器中不起作用。在Firefox中，您的代码运行良好。检查this bug。

您可以看到从::first-linehere中排除的属性。其中包括

.element::first-line {
    font-style: ...
    font-variant: ...
    font-weight: ...
    font-size: ...
    font-family: ...

    line-height: ...
    color: ...
    word-spacing: ...
    letter-spacing: ...
    text-decoration: ...
    **text-transform: ...**

    background-color: ...
    background-image: ...
    background-position: ...
    background-repeat: ...
    background-size: ...
    background-attachment: ...
}

我也有同样的问题。* * 原来我把p元素做成了{display: inline;}：**

p {
         font-size: 22px;
         line-height: 1.5;
         margin-bottom: 15px;              
         display: inline;  // this is the problem.
     }

但我忘了。
所以后来当我尝试下面的伪类时：

p::first-line {
         color: red;
     }

不管我做了什么，伪类就是不起作用。
然后我想我可能对p元素做了些什么。
我回去检查了一下，发现我把p元素变成了{display: inline;}。* * 我删除了display: inline;，然后伪类开始工作**