1

Firefox is causing an issue that does not appear in Chrome, Safari or IE11. When adding the display: inline property along with the ::before pseudo element to a heading element, it causes the bottom: 0 of the absolute positioned pseudo element to not appear at the bottom of the element but rather at the bottom of the first line.

This only shows on headings that span across multiple lines, does anyone know a work around for this for Firefox? All of the different display property values do not make the pseudo element appear the same as the other browsers.

h1 {
  position: relative;
  display: inline;
}

h1::after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 5px;
  content: "";
  background-color: red;
  transition: all .2s ease-in-out;
}

h1:hover::after {
  width: 100%;
}
<div style="width:200px;">
<h1>My Heading That Covers Multiple Lines</h1>
</div>

CodePen: https://codepen.io/anon/pen/bXEjGg

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Tom Hartley
  • 93
  • 2
  • 10

1 Answers1

0

Pseudo element are tricky when it comes to inline element on multiline. In this case, you can consider background to easily do what you want:

h1 {
  position: relative;
  display: inline;
  background: linear-gradient(red, red) bottom left no-repeat;
  background-size: 0 5px;
  transition: all .2s ease-in-out;
}

h1:hover {
  background-size: 100% 5px;
}

.row {
  width: 200px;
}
<div class="row">
  <h1>My Heading That Covers Multiple Lines</h1>
</div>

Related: How can I achieve a CSS text loading animation over multiple lines?

You can consider box-decoration-break if you want the same effect on all the lines:

h1 {
  position: relative;
  display: inline;
  background: linear-gradient(red, red) bottom left no-repeat;
  background-size: 0 5px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone; 
  transition: all .2s ease-in-out;
}

h1:hover {
  background-size: 100% 5px;
}

.row {
  width: 200px;
}
<div class="row">
  <h1>My Heading That Covers Multiple Lines</h1>
</div>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
  • Thanks for the help but I'm not looking for the same effect on all lines, the underline should only be at last line and the width should only be as far as the last word on that line. – Tom Hartley Jul 25 '19 at 08:26
  • @TomHartley in this case simply use `ìnline-block` instead of `inline` – Temani Afif Jul 25 '19 at 08:27
  • Just ran into this same issue. It appears the problem has still not been resolved. – bgallagh3r Jan 26 '23 at 19:28