将底部边框添加到 <strong> [重复]答案

【问题标题】：Adding bottom border to <strong> [duplicate]将底部边框添加到 <strong> [重复]
【发布时间】：2020-03-05 10:52:41
【问题描述】：

我正在尝试为标签添加边框。边框应该每次都应用或应用于文本。

这是设计。

这是我到目前为止的代码。

h2 {
  position:relative;
}
h2 strong:after {
  content: "";
  position:absolute;
  border-bottom: 5px solid red;
  height: 10px;
  width:100%;
  bottom: 0;
  display: inline-block;
}

<h2>
Pellentesque in <strong>ipsum</strong> id orci porta dapibus. Donec rutrum congue leo eget malesuada.
</h2>

非常感谢任何帮助。

谢谢。

【问题讨论】：

你的宽度是 100%。这就是为什么边框在文本之后继续的原因

标签： html css

【解决方案1】：

你应该让你的强元素相对，而不是你的 H2。

strong {
  position:relative;
}
h2 strong:after {
  content: "";
  position:absolute;
  border-bottom: 5px solid red;
  height: 10px;
  width:100%;
  bottom: 0;
  display: inline-block;
  left: 0;
}

<h2>
Pellentesque in <strong>ipsum</strong> id orci porta dapibus. Donec rutrum congue leo eget malesuada.
</h2>

【讨论】：

【解决方案2】：

你很亲密。 position: relative 需要在 <strong> 元素上而不是 <h2> 上，并且您需要在伪元素上使用 left: 0; 以使其对齐。

h2 strong {
  position: relative;
}
h2 strong:after {
  content: "";
  position: absolute;
  border-bottom: 5px solid red;
  height: 10px;
  width: 100%;
  bottom: 0;
  left: 0;
  display: inline-block;
}

<h2>
Pellentesque in <strong>ipsum</strong> id orci porta dapibus. Donec rutrum congue leo eget malesuada.
</h2>

【讨论】：

【解决方案3】：

根据您的代码，这是一个粗略的 sn-p，可让您模拟 inset 底部边框：

strong 是需要relative 定位的元素，稍后将帮助包含absolute after 定位的伪元素。
您可能希望使用background 或box-shadow，而不是在此处使用border，具体取决于您更喜欢的解决方案。在这种情况下，我们将使用 5px 高度 background 行。
display: block 是在您使用 position: absolute 声明时隐含的，因此此处无需使用 inline-block 显示。
关于堆叠顺序，您需要将下划线推到背景，以避免在这种情况下设计不一致或文本选择。 z-index: -1 CSS 声明在这里完成。

h2 strong{
  position: relative;
}

h2 strong::after {
  content: "";
  position: absolute;
  background-color: limegreen;
  height: 5px; width: 100%;
  left: 0; bottom: 5px;
  z-index: -1;
}

<h2>
Pellentesque in <strong>ipsum</strong> id orci porta dapibus. Donec rutrum congue leo eget malesuada.
</h2>

【讨论】：

可以通过解释您更改的内容和原因来改进此答案。
完成了，但似乎问题已经结束了！ :D

【解决方案4】：

不需要伪类。你可以像这样简单地使用background-image。

h2 strong {
  background-image: linear-gradient(to top, red 0 5px, transparent 5px);
}

<h2>
  Pellentesque in <strong>ipsum</strong> id orci porta dapibus. Donec rutrum congue leo eget malesuada.
</h2>

【讨论】：