Css Chrome上的Pseudo:：before:：after内联标题

我有一些标题和下面的伪风格

h2 {
    position: relative;
    display: inline;
} 

h2::before {
    content: "";
    position: absolute;
    background-color: #000;
    width: 100vw;
    height: 1px;
    left: 100%;
    margin-left: 20px;
    top: 50%;
}

h2::after {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    top: 50%;
    transform: translate(-50%,-50%);
    left: 100%;
    border-radius: 50%;
    border: 1px solid #000;
    margin-left: 20px;
}

在Firefox中看起来不错，伪元素将保留在h1文本的第一行之后

当我在低于500px的小屏幕上以Chrome响应模式进行测试时，问题出现了<代码>显示：内联似乎不起作用

有什么办法可以让Chrome像firefox一样显示我的伪浏览器吗

首先检查这段代码，它在两种情况下工作完全相同 浏览器

正文{
溢出x：隐藏；
}
氢{
位置：相对位置；
显示：内联块；
明确：两者皆有；
浮动：左；
}
h2：：之前{
内容：“；
位置：绝对位置；
背景色：#000；
宽度：100vw；
高度：1px；
左：100%；
左边距：20px；
顶部：14px；
}
h2：：之后{
内容：“；
位置：绝对位置；
宽度：10px；
高度：10px；
顶部：14px；
转换：翻译（-50%，-50%）；
左：100%；
边界半径：50%；
边框：1px实心#000；
左边距：20px；
}

Lorem ipsum Door sit amet，eiusmod Temporal
Lorem ipsum door sit amet，
eiusmod tempor
Lorem ipsum dolor sit amet，
eiusmod tempor
eiusmod tempor

hi@weBBer谢谢你的回答，我需要在第一行文本后粘贴一行（当文本在小屏幕上分成几行时），问题是

内联块

无法实现这一点，：）我不确定我们是否在同一页。看看我的屏幕截图（Firefox），我需要的是一样的that@YudyAnanda更新了我的代码，请再次检查。好的，它可以工作，但因为我没有使用

（标题用于生成的博客内容），所以当标题分成几行时（在小屏幕上）pseudo将再次将标题视为一个块，并且pseudo将远离标题的第一行。不过还是谢谢你