javascript - 使元素与前一个元素的最后一行保持内联

Question

我目前正在使用一个伪元素来使难度标签在跨越多行时与页面标题保持内联。然而，这是被谷歌标记的，因为它在他们的爬虫中显示为多个 h1 标签——我想这是有道理的。有没有办法在为难度标签使用完全独立的元素的同时实现同样的效果？

https://codepen.io/mrweiner/pen/XoGePG

<div class="container container--1">
  <h1>Here is a long title with a pseudo element tag</h1>
</div>

<div class="container container--2">
  <h1>Here's a multi-line title with a span tag</h1>
  <span class="difficulty">Beginner</span>
</div>

.container {
  width: 500px;
  margin: 0 auto;
  border: solid 1px red;
  padding: 1em;

  h1 {
    max-width: 350px;
    display: inline-block;
  }

  &--1 h1::after {
    content: 'Beginner';
  }

  &--1 h1::after,
  .difficulty {
    display: inline-block;
    vertical-align: middle;
    font-style: none;
    font-size: 1rem;
    padding: .25rem;
    border: solid green 1px;
    margin-left: 1rem;
  }
}

Answer 1

您可以简单地将其合并到标题中:

<h1>Here's a multi-line title...<span class="difficulty">Beginner</span></h1>

Codepen demo

如果您不想在标题中添加额外的文本，您可以将标题设为内联。

Codepen Demo 2