输入范围上的伪元素之前和之后的 CSS答案

【问题标题】：CSS before and after pseudo element on input range输入范围上的伪元素之前和之后的 CSS
【发布时间】：2014-07-03 22:46:54
【问题描述】：

我想做一个显示边界的滑块。

我在互联网上找到了一些我根据我的案例改编的代码。这段代码只使用了 html 和 css，它在 Chrome 上显示得很好，但在 Firefox 上却没有（我只有 IE9，它没有显示任何滑块）：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <style>

        input {
            position: relative;
        }
        input::after {
            position: absolute;
            top: 1em;
            right: 0em;
            content: attr(max);
        }
        input::before {
            position: absolute;
            top: 1em;
            content: attr(min);
        }
    </style>
</head>
<body>
    <input type="range" id="test" min="1" max="5">
</body>
</html>

我知道这似乎不在 w3c 规范中 (SO response)。

但是任何浏览器都可以正确地做到这一点吗？

【问题讨论】：

我很困惑。你的意思是你得到这个代码的来源说它在 Chrome 上运行良好而不在 Firefox 上运行良好？既然你说你只有IE9，不能在其他任何地方测试。
不，我修改了代码，它可以在我的计算机上的 Chrome 上运行，但不能在 Firefox 上运行。但我唯一的 IE 是 9，所以我无法在 IE10/11 上测试。
哦。那你还没有回答你自己的问题吗？由于它没有在任何标准中定义，从而导致浏览器支持不一致，因此没有“正确”的方法来做到这一点。
@Pierre-LouisLaffont 使用浏览器堆栈
我正在寻找使用其他标签或任何东西来解决此问题的方法。

标签： css html pseudo-element

【解决方案1】：

您可以使用 span 将其与带有 data- 前缀的自定义属性包装起来，这些属性自 HTML5 起有效

HTML

<span data-range-min="1" data-range-max="5">
   <input type="range" id="test" min="1" max="5" />
</span>

CSS

span {
    position: relative;
}
span:after {
    position: absolute;
    top: 1em;
    right: 0em;
    content: attr(data-range-max);
}
span:before {
    position: absolute;
    top: 1em;
    content: attr(data-range-min);
}

Demo

Demo 2 （有点花哨的版本）

在 Firefox 和 Chrome 上测试，效果很好，现在显然您需要通过声明一些自定义字体系列和颜色来设置它们的样式，以根据您的要求使它们有点花哨。

【讨论】：

在 Chrome 和 IE10+ 中都能正常工作
我正在考虑添加一个跨度以放置:after 和:before，但我阻碍了一种动态获得边界的方法。您的解决方案很好，但您必须在 html 中复制边界。
@Pierre-LouisLaffont 没有得到边界部分，你能解释清楚吗？
我称之为边界的部分是最小值和最大值（如果不是适当的词，请原谅我的英语）。它们必须与您的解决方案一起复制为跨度的新属性。
@Pierre-LouisLaffont 你能看看第二个演示吗