1289700 - Inconsistent behaviour of absolutely positioned before/after-elements in inline anchors

Status: RESOLVED DUPLICATE of bug 743599

(Core :: Layout, defect)

Description

[tom.mclean96]

User Agent: Mozilla/5.0 (Windows NT 10.0; WOW64; rv:47.0) Gecko/20100101 Firefox/47.0
Build ID: 20160604131506

Steps to reproduce:

I built decorations for an anchor using absolutely positioned :before and :after pseudo-elements and reflowed the text by altering the width of the parent container.

http://codepen.io/anon/pen/pbKPPN
in case the pen somehow disappears:
HTML
<div class="qwerty">
  <p>
    Lorem ipsum dolor sit amet, nihil sequi consequuntur maiores animi repudiandae dolor aliquam modi aliquid <a href="http://github.com">consectetur adipisicing elit.</a> reiciendis est? Voluptatibus officia, illo, libero odit soluta non dolorum officiis quam.
  </p>
</div>
  
CSS:
.qwerty {
  width: 50%;
}

a {
  font-weight: bold;
    position: relative;
    text-decoration: none;
}
a:before, a:after {
    background-color: currentcolor;
    content: "";
    height: 2px;
    left: 0;
    position: absolute;
    top: -4px;
    transition: width 0.25s ease 0s, background-color 0.25s ease 0s;
    width: 100%;
}
a:after {
    bottom: -4px;
    left: auto;
    right: 0;
    top: auto;  
}




Actual results:

Set width of .qwerty to 40% so the styled anchor comes FIRST in the next line. As you can see, the :before and :after-elements disappear.


Expected results:

The elements should be visible regardless of the position in text.

Comment 1

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

Attachment: reporter's testcase

Comment 2

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

This is a combination of bug 743599 and bug 489100.