Question

我目前正在使用一个伪元素来在页面标题跨越多行时使难度标签与页面标题保持一致。但是，由于它在其抓取工具中显示为多个h1标签，因此Google对其进行了标记-我认为这很有意义。在难度标签中使用完全独立的元素时，是否有办法实现相同的效果？

<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

如果您不想在标题中包含其他文本，则可以将标题设为inline。

Codepen Demo 2

Answer 2

使用您的伪元素检查我更新的叉子：

https://codepen.io/kirapwn/pen/LMaOEG

    position: absolute;
    bottom: 0;
    right: 0;
    transform: translateX(100%);

和`position：relative'

Answer 3

将标签添加到h1 ...

.container {
  width: 500px;
  margin: 0 auto;
  border: solid 1px red;
  padding: 1em;
}
.container h1 {
  max-width: 350px;
  position: relative;
}
.container--1 h1::after {
  content: 'Beginner';
}
.container--1 h1::after,
.container .difficulty {
  font-size: 1rem;
  padding: .25rem;
  border: solid green 1px;
  margin-left: 1rem;
  position: absolute;
  z-index: 1;
  right: 1px;
  bottom: 1px;
}

<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 is a long title with a pseudo element tag
  <span class="difficulty">Beginner</span>
  </h1>
  
</div>

使元素与上一个元素的最后一行保持一致

3 个答案: