Html 如何仅将背景色添加到主元素，而不添加：before和：after

我正在尝试将标题样式设置为如下所示：

问题是，当我尝试向h2添加背景色时，它也适用于：before和：after内容，并跨越页面宽度。我只想把它应用到h2上

我尝试在h2中添加一个div，并将其样式化，而不是h2

。样式化标题{
文本对齐：居中；
字体大小：32px；
背景：黑色；
颜色：白色；
}
.样式标题：之前{
内容：“；
显示：内联块；
利润率：0px 8px 0；
背景色：#999；
高度：3倍；
宽度：140px；
}
.样式标题：后{
内容：“；
显示：内联块；
利润率：0.08像素00像素；
背景色：#999；
高度：3倍；
宽度：140px；
}

---

测试测试

如果没有伪元素，我会做不同的事情：

。样式化标题{
字体大小：32px；
颜色：白色；
display:table；/*使元素适合内容*/
边距：自动；/*到中心*/
/*边界将是线条的空间*/
左边框：50px实心透明；
右边框：50px实心透明；
填充物：5px10px；
背景：
/*主背景仅覆盖填充物*/
线性渐变（绿色，绿色）填充框，
/*线条还覆盖边界区域（宽度：100%高度：3px）*/
线性渐变（蓝色、蓝色）中心/100%3px边框框无重复；
}

---

测试

伪元素不是实现这一点的方法。伪元素是元素的一部分。这项工作：

。收割台夹持{
位置：相对位置；
高度：3倍；
宽度：500px；
z指数：1；
溢出：可见；
背景：灰色；
}
.头部弹跳{
位置：相对位置；
z指数：2；
背景：黑色；
颜色：白色；
宽度：适合的内容；
填充物：5px；
保证金：自动；
转化：translateY（-50%）；
}

测试

背景色不适用于

：：在

之前和

：：在

之后。它们就在

h2

中，它（因为它是

display:block

）横跨其父元素的宽度。谢谢Temani！这正是我想要的。我试着用“黑色”来代替线性渐变，但没用。我需要使用线性渐变还是只能使用纯色？@cjk47您必须使用渐变，但由于我指定了相同的颜色，这就像使用纯色，但所有技巧都依赖于渐变