::before pseudo element with display:block stops balancing

[christianmagill]

Original Title: ::before pseudo element used as accent stops balancing.

Expected Behaviour

I'd like to use graphical accents for a number of headlines. If I add these using a ::before pseudo-element, I'd like the text to continue to balance.

Actual Behaviour

When I include a ::before pseudo-element as an accent, the text is not balanced.

Reproduce Scenario (including but not limited to)

Steps to Reproduce

Platform and Version

3.3.0 / Testing on Chrome (Mac OS)

Sample Code that illustrates the problem

h2::before {
  content: "";
  display: block;
  background: url("images/graphic-wave.png");
  background-size: contain;
  width: 100px;
  height: 26px;
  margin-bottom: 32px;
}

balanceText('h2', {watch: true});

Logs taken while reproducing problem

[redmunds]

@christianmagill Thanks for logging bugs. I haven't had a chance to look at this yet, but display:block seems problematic. This code was designed to balance inline content inside a block-level container, so I'm wondering if pseudo-element may be removed from the context. Have you tried removing display:block (which I think defaults to display:inline)?

[christianmagill]

I couldn't get display:inline to work as needed, but what I ended up doing was adding the background image to the h2 and adding padding to compensate.

[redmunds]

Glad to hear that you found a workaround.

Currently in the code, el.offsetWidth for element with ::before pseudo-element is 0, so code thinks there is no text to balance. Not sure how to fix this off the top-of-my-head. I will leave this issue open in case anyone has any ideas about this.