Question

我一直在努力寻找答案，以了解为什么这样做，所以我想我会把它张贴在这里，看看是否有人知道这种情况发生，并且有解释。也许这只是我不知道的CSS / HTML错误。

我创建了以下jsfiddle作为示例。

@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>

简单的效果，只要H1是一行，效果就很好。但是，一旦您调整屏幕大小并且H1中断为2行，似乎H1的行为就会改变吗？ inline-block-> block？如果您在devtools中检查H1，则它会从其“空格”变为在断开时将文本换成全角，然后将伪元素推到屏幕的右侧而不是文本的右侧。就像它在一行上一样。

我对此一无所知，我尝试过浮动，但没有用。

请公开有关如何实现此目标的任何建议，或者可能是其失败的原因，我坚持使用媒体查询来更改字体大小和填充。

谢谢。

编辑

以下是一些屏幕截图，可以进一步阐明我的要求：

一行上的文字：https://screencast.com/t/W83PxIck

当文本分为两行时：https://screencast.com/t/Lx8xjHkrWx

Answer 1

不，这是预期的行为。它仍然是inline-block。块的右侧是文本的最右侧，而不是最后一行的右侧。

如果您希望将其放置在最后一行之后，则需要使用display: inline，而不是inline-block。

您可以使用开发工具查看这些框，这些工具将清楚地显示它们的开始和结束位置。

CSS：将内联块更改为块

1 个答案: