CSS: inline-block changes to block

Question

I have been struggling to find answers as to why this does this so I'd figured I'd post it here to see if anyone else knows this happens and if there is an explaination. Or maybe it is just a CSS/HTML bug I am unaware of.

I created the following jsfiddle for an example.

@import url('https://fonts.googleapis.com/css?family=Playfair+Display:400,700,900');

body {
  background-color: #20262e;
  height: 100%;
  margin: 0px;
  padding: 0px;
}

.title {
  margin-bottom: 0 !important;
  padding-right: 100px;
  color: #ffffff;
  font-size: 50px;
  font-family: 'Playfair Display', serif;
  font-style: normal;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1;
  position: relative;
  display: inline-block;
}

.title::after {
  background-color: #f5a800;
  width: 80px;
  height: 4px;
  content: '';
  position: absolute;
  top: 50%;
  right: 0px;
}

<div class="container">
  <h1 class="title">
    This Is An Awesome Title
  </h1>
</div>

Simple effect and works great as long as the H1 is one line. However, once you resize the screen and the H1 breaks to 2 lines, it seems that the behavior of the H1 changes? inline-block->block? If you inspect the H1 in devtools, it goes from having its "space" go from wrapping the text to full width when it breaks and the pseudo element is then pushed way out to the right of the screen instead of the right side of the text like it is when it is on one line.

I am all out of ideas on hacks around this, I've tried floats and flex to no avail.

Open to any suggestions on how to accomplish this, or maybe its a lost cause and I am stuck with changing font sizes and padding using media queries.

Thanks.

EDIT

Here are a few screenshots to further clarify what I am asking:

Text on one line: https://screencast.com/t/W83PxIck

Text when it breaks to two lines: https://screencast.com/t/Lx8xjHkrWx

@jhpratt - please see my screenshots above, I've edited my original post. Thanks. — Jason Ryan
– Jason Ryan, Commented Jun 28, 2018 at 12:30
That's precisely how I understood your question to begin with :) — jhpratt
– jhpratt, Commented Jun 28, 2018 at 12:34
Ok, because I was confused by what you said here: "The right side of the block is the rightmost side of the text, not the right side of the final line." - this is not the case when text drops to another line as shown in the screenshot. That behavior is exactly what I am looking to achieve though so the accent border stays 20px off the right side of the line that is the widest. — Jason Ryan
– Jason Ryan, Commented Jun 28, 2018 at 13:06

jhpratt · Accepted Answer · 2018-06-27 02:51:45Z

1

Nope, that's the expected behavior. It is still inline-block. The right side of the block is the rightmost side of the text, not the right side of the final line.

If you're looking to place it immediately after the final line, you need to use display: inline, not inline-block.

You can view the boxes by using dev tools, which will clearly show you where they begin and end.

answered Jun 27, 2018 at 2:51

jhpratt

7,15016 gold badges43 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

CSS: inline-block changes to block

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related