重复的虚线图像背景在不同区域中以不同大小显示，即使使用相同的CSS

我正在构建具有特定设计的目录页面。 根据设计，每个标题都应随后是点，直到线结束为止。 点的大小也会根据标题的大小而有所不同。 我已经使用了标签标签作为包装，里面有一个锚标签。我已经使用了伪“ ::”元素显示点。我使用了带有背景重复CSS的点图像。 这是预期的。但是我面临一个奇怪的问题。 例如，H1的点设计将更大。H2的点设计应该较小。H3的点设计应该更小。该页面将具有多个H1，H2S和H3S。 问题是H3S内部的点显示不同。一个H3内的点更大，另一个较小。即使它们具有相同的样式。 .outer {最大宽度：600px;溢出：隐藏;} H1，H1 a {font-weight：400;字体大小：26px！重要；边界左：4PX实心＃000;颜色：＃000;线高：38px;左填充：10px;边缘底：15px;} H2，H2 A {颜色：＃006DA3;字体大小：23px！重要；字体重量：400;边界左：4PX实心＃006DA3;线高：30px;左填充：10px;边缘底：15px;} H3，H3 A {颜色：＃000;字体大小：21px！重要；字体重量：400;边界左：4PX实心＃2690CD;线高：28px;左填充：10px;边缘底：15px;} H4，H4 A {颜色：＃000;字体大小：19px！重要；字体重量：400;边界左：4PX实心＃71A3BC;线高：26px;左填充：10px;边缘底：15