在最后一行文本后创建下划线以填充白色 space

Question

我在 SCSS/CSS 样式创意方面遇到了问题，我想用实线填充标题最后一行之前或之后的 space。最后一行文本没有设置宽度（它根据屏幕尺寸而变化）我愿意接受任何建议。

这是当文本右对齐或左对齐时我想要实现的。

|Here is some text on screen|     |Here is some text on screen|
|very cool -----------------|  or |----------------- very cool|
|                           |     |                           |
|                           |     |                           |

为清楚起见添加了编辑代码：

HTML

<h1>You're the painter, we just want to see you paint.</h1>

CSS（我已经做到了）

h1{
  font-family: "doesntMatter";
  font-style: bold;
  font-size: 2rem;
  text-align: left;
}

h1::after{
  display: inline-block;
  line-height: 0;
  position: relative;
  bottom: 2.5rem;
  border-bottom: 10px solid red;
  width: 100%;
  content: "";
}

Answer 1

基于您已有的内容，此代码段将文本放在 span 元素中。这会启用白色填充，它可以覆盖实际文本下方的红线部分。

h1 {
  font-family: "doesntMatter";
  font-style: bold;
  font-size: 2rem;
  text-align: left;
  position: relative;
}

h1>span::after {
  display: inline-block;
  position: absolute;
  border-bottom: 10px solid red;
  width: 100%;
  left: 0;
  margin-top: -11px;
  content: "X";
  color: transparent;
  z-index: -1;
}

h1>span {
  background: white;
  padding-bottom: 11px;
}

<h1><span>You're the painter, we just want to see you paint.</span></h1>

注意 - 它有点老套，包括将 1px 的位置与线的高度不同。这是因为在一个 CSS 像素使用多个屏幕像素的现代屏幕上，系统在定位时可以 'leave behind' 颜色痕迹（例如屏幕像素 - 而不是整个 CSS像素）。

Answer 2

我找到了我的问题的解决方案，如果你在这里使用这段代码运行它，最后一行将被删除。

.container {
  width: 100%;
  padding-inline: 2rem;
}

.text {
  font-style: bold;
  font-size: 2.5rem;
  line-height: 2.5rem;
  position: relative;
  overflow-x:hidden;
}

.text::after {
  position: absolute;
  left:0;
  bottom: 0.9rem;
  width: 100%;
  border-bottom: 0.4rem solid #000;
  content: "";
}

<section class="container">
      <h1 class="text">You're the painter, we are just the paint, brushes and canvas</h1>
    </section>

但是，如果您从 text::after 样式中删除 left:0;，它会神奇地跳到最后填充空白 space。

我添加了一个 margin-left: 1rem 来给这些东西一些喘息的空间，但是是的，我真的不知道发生了什么。

我不知道它是如何工作的，但它有点像，如果 .text{} 元素应用了 overflow-x: hidden 那么效果将在 [=57 的宽度处截止=].

.container {
  width: 100%;
  padding-inline: 2rem;
}

.text {
  font-style: bold;
  font-size: 2.5rem;
  line-height: 2.5rem;
  position: relative;
  overflow-x: hidden;
}

.text::after {
  position: absolute;
  bottom: 0.9rem;
  width: 100%;
  margin-left: 1rem;
  border-bottom: 0.4rem solid #000;
  content: "";
}

<section class="container">
  <h1 class="text">You're the painter, we are just the paint, brushes and canvas</h1>
</section>

这是实现效果的一种方法，如果您希望线条溢出页面，请将 overflow-x: hidden 应用于 .container{} 元素并从 .text{} 元素中删除...因为我的容器是 100% 宽度，所以线条离开页面并按预期工作。

.container {
  width: 100%;
  padding-inline: 2rem;
  overflow-x: hidden;
}

.text {
  font-style: bold;
  font-size: 2.5rem;
  line-height: 2.5rem;
  position: relative;

}

.text::after {
  position: absolute;
  bottom: 0.9rem;
  width: 100%;
  margin-left: 1rem;
  border-bottom: 0.4rem solid #000;
  content: "";
}

<section class="container">
  <h1 class="text">You're the painter, we are just the paint, brushes and canvas</h1>
</section>

该行响应最后一行宽度的任何变化。我将不得不研究一些边缘情况，比如如果最后一行文本实际上填满了 header 的整个宽度，那么末尾只有一个小块。

但是已经修复了！我希望这可以帮助将来无法找到 google 的正确单词组合的任何人找到解决方案。

在最后一行文本后创建下划线以填充白色 space

Create underline after last line of text to fill white space

html

css

sass

reactjs

next.js