Html 如何在带有填充的h1元素之后使用h1:after添加行

当我尝试创建一个带有填充的h1元素并将其设置为内联元素，然后使用h1使用屏幕宽的行进行后续操作：当它在新行上填充h1元素后，如何使h1元素的填充位于水平行之前

css代码如下所示

h1 {
    font-size: 15px;    
    background: #ccc;
    display: inline;
    padding: 8px 0px 5px 10px;
}


.headline {
    font-family: Calibri, "Helvetica", san-serif;
    line-height: 1.5em;
    color: black;
    font-size: 20px;
}

h1:after {
    content:' ';
    display:block;
    border:4px solid #ccc;
    border-radius:1px;
    -webkit-border-radius:1px;
    -moz-border-radius:1px;
    box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
    -webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
    -moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
}

html代码只是一个跨度，在h1元素中包含类标题

目前看起来是这样的： 我希望它看起来几乎一样，除了文本末尾的行下面的填充。

试试看 h1显示：-webkit内联框；或内联flex

试试看

---

h1显示：-webkit内联框；或内联flex

你想得太多了

将

h1

保留为块级项目，并将样式移动到

span

h1{
字体大小：15px；
}
.标题{
字体系列：Calibri，“Helvetica”，圣塞里夫；
线高：1.5em；
颜色：黑色；
字体大小：20px；
背景：#ccc；
填充：8px 10px 3px 10px；
}
h1{
边框底部：4px实心#ccc；
}

---

标题

你想得太多了

将

h1

保留为块级项目，并将样式移动到

span

h1{
字体大小：15px；
}
.标题{
字体系列：Calibri，“Helvetica”，圣塞里夫；
线高：1.5em；
颜色：黑色；
字体大小：20px；
背景：#ccc；
填充：8px 10px 3px 10px；
}
h1{
边框底部：4px实心#ccc；
}

---

Headline

我添加了一张图片，展示了它的外观，并描述了我想要的外观。非常感谢！在这条路上呆的时间比我敢说的要长；）我添加了一张图片，展示了它的外观，并描述了我想要的外观。非常感谢！在这条路上呆的时间比我敢说的要长；）