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

Question

我正在开发一个带有 ionic 并使用 ::after 伪元素的移动应用程序。它在我的计算机中的浏览器 View 中运行良好。但是，当我将应用程序部署到设备中时，红色三 Angular 形 从 View 中消失了。有人知道问题出在哪里吗？或者我可以应用任何其他替代解决方案吗？

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

fiddler :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%;
}