CODEWITHSUNDEEP
htmlcss
Jason Ryan
Jason Ryan

Reputation: 41

CSS: inline-block changes to block

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

Upvotes: 1

Views: 575

Answers (1)

jhpratt
jhpratt

Reputation: 7130

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.

Upvotes: 1

Related Questions