Javascript 使用：：after&；：：的特定箭头：在使用IE7的伪元素之前

我再一次在使用IE7时遇到问题

我尝试使用：：after&：：before伪元素在条目的光标末端添加一个箭头。 JSFIDLE的代码中没有显示箭头，但用户必须完全自由地设计箭头（大小、类型、颜色等）

参见JSFIDLE

28
.progressamount:之后，.progressamount:之前，
div[class*=pseudoelement]>。之前，div[class*=pseudoelement]>。之后{
边框：实心透明；
内容：“；
身高：0；
宽度：0；
位置：绝对位置；
}
/*-------------------------------------------------------------右普通箭头-------------------------------------------*/
.RightPlainArrow:之后，
.rightRightPlainArrow[class*='pseudoelement']>。之后{
右边框颜色：rgb（0,0,0）；
边框宽度：13px；
边缘顶部：-13px；
右：-13px；
}
/* ------------------------------------------------------------------------------------------------------------------- */

以及它的全屏效果

正如您所猜测的，它在IE8+和Chrome上运行良好，但由于IE7不支持这些伪元素，因此它不适用于此版本

我尝试了很多不同的方法，比如使用IE8.js或jquery伪插件，但在我的情况下似乎不起作用（IE8.js把我的页面弄得一团糟）。我还尝试了luke lutman的另一个jquery伪插件，但我不知道它是否起作用，或者我只是不知道如何使用它。 原因可能是我已经在使用很多不同的工具来让IE7工作，比如渐变的过滤器或者半径和阴影的CSSPIE库（不在小提琴中）

我的例子够清楚吗？ 我试图简化它，但它本来是一个相当混乱的简化，因为我也使用了很多私人脚本在其中

如何使用IE7显示这个小箭头（并使用：：after&：：before伪el）

这有时只是碰巧是不可能的吗

谢谢,，

---

Tim

尝试UTF-8 Unicode块箭头或三角形

css

看

---

如果一个7年的浏览器不显示漂亮的小箭头，世界会结束吗？谢谢@NiettheDarkAbsolOh是的，为什么不呢，我可以在IE7中使用这个替代方案。唯一的问题是，用户必须完全自由地按照他想要的方式设计箭头（实际上是整个控件），并选择类型、大小和颜色，但在这种非常特殊的情况下，这似乎是不可能的……各种选项（“类型”）应该在post的链接中找到

css

color

应能够设置为与普通css属性相同，例如，

颜色：蓝色（“颜色”）。大小也可以由普通css设置，例如，
font-weight:500，等等。顺便说一句，用户必须完全自由地按照他想要的方式设计箭头（实际上是整个控件），并选择类型、大小和颜色，而不是将其作为要求的一部分包含在原始帖子中？也许编辑OP以包括、描述需求的所有方面？感谢用户必须完全自由地设计箭头（实际上是整个控件），并选择类型、大小和颜色-user3665301。尝试了
canvas
元素？是的，我忘了指定它，这很重要。但是你的第一个想法很有趣，我现在就要看一看，看看我能做些什么。另外，看看canvas元素。谢谢@guest，我会让你了解最新情况：）
<div style=" " 
             id="progress" 
             class="progress">
            <div unselectable="on" style="
                                          color:rgb(0,94,149); 
                                          border-color: rgb(0,0,151);
                                          border-style: dashed;" 
                 id="progressAmount" 
                 class="amount progressamount pseudoelement-after rightRightPlainArrow">

                    <div class="arrow_box ">
                        28
                    </div>

    .progressamount:after, .progressamount:before,
div[class*=pseudoelement] > .before, div[class*=pseudoelement] > .after  {
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
}

/* ------------------------------------------------ right-right plain arrow ------------------------------------------------ */
.rightRightPlainArrow:after,
.rightRightPlainArrow[class*='pseudoelement'] > .after {
    border-right-color: rgb(0,0,0);
    border-width: 13px;
    margin-top: -13px;
    right: -13px;
}
/* ------------------------------------------------------------------------------------------------------------------- */

content : "◀";