html - Firefox 伪元素定位在一行中的第一个单词

Question

Firefox 将伪元素定位在行内元素上，例如 <span>和 <a>所以它们扩展为包含 :before 或 :after 元素。这与 IE 和 Chrome 不同，后者的伪元素位于父元素之外。但是如果父元素在一行的开头，Firefox 的行为会很奇怪。如果你运行 this jsfiddle在 Firefox 中你会明白我的意思。

这是代码...HTML

<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>

CSS

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;
}

我的 CSS 有问题吗？ IE 和 Chrome 中的行为对于流到新行的元素来说并不理想，但我可以接受...

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

Answer 1

你很接近!将跨度设置为 display: inline-block; 并使用 border 而不是 outline。

https://jsfiddle.net/cbsteph/yarv7rdf/15/

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