Html Firefox伪元素在一行中第一个单词上的定位

Firefox将伪元素放置在内嵌元素上，例如，在Firefox中，您将看到我的意思

这是代码。。。 HTML

我的CSS有什么问题吗？IE和Chrome中的行为对于一个元素流入一条新的生产线来说并不理想，但我可以接受

---

有没有办法修复FF中行的开头行为？我正在使用FF 36.0.4

你很接近！设置要显示的范围：内联块；并使用边框而不是轮廓

---

是的，我也试过了，效果更好。我没有确定该解决方案的唯一原因是它破坏了高亮显示元素的流程。边界和轮廓对我来说似乎并没有太大的区别，我只有轮廓可以让我更容易地看到发生了什么。

<div><p>Fixie Williamsburg 8-bit, try-hard master cleanse small batch literally
post-ironic. Pug Williamsburg small batch Schlitz, iPhone banh mi irony hella
skateboard <span>Pinterest forage slow-carb</span> try-hard before they sold out
cred. Craft beer keytar farm-to-table, chia twee before they sold out Marfa
hella trust <a>fund</a> biodiesel. Normcore PBR <span>dreamcatcher</span> plaid,
<span>XOXO</span> cornhole crucifix master cleanse fap PBR. Pickled next level
<span>mlkshk</span>, cornhole Godard typewriter master cleanse flannel ethical.
Etsy fixie messenger bag jean shorts, roof party hoodie aesthetic plaid yr
meggings. Mumblecore <span>asymmetrical</span> semiotics DIY tattooed</p></div>

div {
    width: 400px; 
    overflow: visible;
    outline: solid 1px black;
}
span, a {
/*  display: inline-block;  
*/    color: firebrick;
    position: relative;
    outline: solid 1px red;
    padding: 0;
}

span:hover::before,
a:hover::before{
    display: inline-block;  
    background:  firebrick /* rgba(0,0,0,.8)*/;
    border-radius: 5px;
    bottom: 26px;
    color: #fff;
    content: 'tooltip text';
    left: calc(80% - 6px);
    padding: 5px 15px;
    position: absolute;
    width: 120px;
}

span:hover::after,
a:hover::after{
    display: inline-block;  
    border: solid;
    border-color: #333 transparent;
    border-color:  firebrick transparent/* rgba(0,0,0,.8)*/;
    border-width: 6px 6px 0 6px;
    bottom: 20px;
    content: "";
    left: 80%;
    position: absolute;
}

span, a {
    display: inline-block;  
    color: firebrick;
    position: relative;
    border: 1px solid red;
    padding: 0;
}