在伪元素在webview中不起作用之后

Question

我正在开发一个带有 ionic 并使用 ::after 伪元素的移动应用程序。它在我的计算机中的浏览器视图本身中运行良好。但是，当我将应用程序部署到设备中时，视图中缺少 红色三角形。有谁知道问题是什么？或者还有其他我可以应用的替代解决方案吗？

注意：我正在使用 KitKat 部署到 Android 应用程序中。不确定它是否不适用于其他版本的 Android 或 IOS。

提琴手：Click here

Answer 1

您是否尝试过不使用伪元素的解决方案？试试这个，

<div class="image">
<span class="red"></span>
<img src="http://placeimg.com/400/100/any">
</div>

CSS

.image{
    position:relative;
}
.red{
    content:'';
    width: 0; 
    height: 0; 
    border-right: 50px solid transparent;
    border-top: 50px solid #f00;
    position:absolute;
    left:0;
    top:0;
}
img{
    width:100%;
}