使用伪元素将文本添加到第二行

Question

我正在尝试在现有 div ID 下方添加文本。 white-space: pre-wrap; 或添加 html 标签（如 content:"\<br/> Lorem ipsome."）不会将文本移动到下一行。

HTML 和 CSS 部分：

div.brand-amenity-value.economy.YV span.amenity-value:lang(en)::after {
    margin-left: 0px;
    white-space: pre-wrap;
    content: '<p> (One date change free) </p>';
}

<div class="brand-amenity-value economy YV" style="height: 70px; background-color: #f2f5e6;">
<div><span class="spark-assistive-text">Yes</span></div>
<span class="amenity-value"><span data-translation="AED 100">AED 100</span></span></div>

需要在第二行的文本的屏幕截图：

Answer 1

您不需要 <p> 或 <br> 标签。伪元素 ::after 本身可以设置样式。在这种情况下，将 display 设置为 block 会起作用：

div.brand-amenity-value.economy.YV span.amenity-value::after {
  margin-left: 0px;
  white-space: pre-wrap;
  content: '(One date change free)';
  display: block;
}

<div class="brand-amenity-value economy YV" style="height: 70px; background-color: #f2f5e6;">
  <div><span class="spark-assistive-text">Yes</span></div>
  <span class="amenity-value"><span data-translation="AED 100">AED 100</span></span>
</div>

或者如果这个解决方案不知何故不是一个选项，您可以使用 \A 添加一个新行：

div.brand-amenity-value.economy.YV span.amenity-value::after {
  margin-left: 0px;
  white-space: pre-wrap;
  content: '\A(One date change free)';
}

<div class="brand-amenity-value economy YV" style="height: 70px; background-color: #f2f5e6;">
  <div><span class="spark-assistive-text">Yes</span></div>
  <span class="amenity-value"><span data-translation="AED 100">AED 100</span></span>
</div>

参考：https://www.w3.org/TR/CSS2/generate.html#content

Answer 2

可以考虑position:absolute

div.brand-amenity-value.economy.YV span.amenity-value::after {
  content: '(One date change free) ';
  position:absolute;
  top:100%;
  left:0;
  white-space:nowrap;
}
div.brand-amenity-value.economy.YV  span.amenity-value{
  position:relative;
  display:inline-block;
}

<div class="brand-amenity-value economy YV" style="height: 70px; background-color: #f2f5e6;">
  <div><span class="spark-assistive-text">Yes</span></div>
  <span class="amenity-value"><span data-translation="AED 100">AED 100</span></span>
</div>

使用伪元素将文本添加到第二行

Add the text to the second line using pseudo element

css

pseudo-element