Html 设置伪元素的宽度：在滚动时继承原始元素的宽度之前

我试图在[data code]：之前安排

100%的宽度，但是

当我在pre元素中输入一行很长的代码并滚动到一边时，我看到
pre[data code]：before
被切断，看起来不太好

代码如下：


pre{
背景色：#233948；
字体：粗体12px/15px Incolata，摩纳哥，Consoleas，“Andale Mono”，“Bitstream Vera Sans Mono”，“Courier New”，Courier，monospace；
颜色：#333；
边框：1px实心#f1c40f；
溢出：自动；
换字：正常；
空白：预处理；
盒影：0 1px2pRGBA（0,0,0,0.2）；
位置：相对位置；
利润率：10px0；
填充：0 7px；
}
前[数据代码]{
填充：3em 1em 7px；
}
前[数据代码]：前{
内容：attr（数据代码）；
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
背景色：#95a5a6；
文本缩进：10px；
字体：粗体12px/20px Arial，无衬线；
颜色：#FFF；
填充：7px0；
}
pre[data code=“CSS”]{
颜色：#7DDECA；
边框颜色：#16a085；
}
pre[data code=“CSS”]：之前{
背景色：#16a085；
}

pre{背景色：#233948；字体：粗体12px/15px Incolata，摩纳哥，Console，“Andale Mono”，“Bitstream Vera Sans Mono”，“Courier New”，Courier，monospace；颜色：#333；边框：1px solid#f1c40f；溢出：自动；换字：正常；空白：pre；方框阴影：0 1px 2px rgba（0,0,0.2）；位置：相对；边距：10px 0；填充：0 7px}
你可能会作弊

不要在
pre
标记上设置背景色，而是使用模拟该背景的垂直渐变


*{
框大小：边框框；
}
前{
背景：线性梯度（至底部，#95a5a6，#95a5a6 32px，#233948 32px）；
字体：粗体12px/15px Incolata，摩纳哥，Consoleas，“Andale Mono”，“Bitstream Vera Sans Mono”，“Courier New”，Courier，monospace；
颜色：#333；
边框：1px实心#f1c40f；
溢出：自动；
换字：正常；
空白：预处理；
盒影：0 1px2pRGBA（0,0,0,0.2）；
位置：相对位置；
利润率：10px0；
填充：0 7px；
}
前[数据代码]{
填充：3em 1em 7px；
}
前[数据代码]：前{
内容：attr（数据代码）；
位置：绝对位置；
排名：0；
左：0；
文本缩进：10px；
字体：粗体12px/20px Arial，无衬线；
颜色：#FFF；
填充：7px0；
}
pre[data code=“CSS”]{
颜色：#7DDECA；
边框颜色：#16a085；
背景：线性梯度（至底部，#16a085，#16a085 32px，#233948 32px）
}

pre{背景色：#233948；字体：粗体12px/15px Incolata，摩纳哥，Console，“Andale Mono”，“Bitstream Vera Sans Mono”，“Courier New”，Courier，monospace；颜色：#333；边框：1px solid#f1c40f；溢出：自动；换字：正常；空白：pre；方框阴影：0 1px 2px rgba（0,0,0.2）；位置：相对；边距：10px 0；填充：0 7px}
是的。。非常感谢你的帮助，我已经试过了，而且成功了。因为它看起来更好，我很高兴