在自己的边框上覆盖元素背景答案

【问题标题】：Overlaying An Element Background over Its Own Border在自己的边框上覆盖元素背景
【发布时间】：2022-02-04 11:49:56
【问题描述】：

我想制作一个如下所示的标题样式： Visual Representation.

我尝试使用一个类 (.label-2) 来描述背景颜色，并使用 ::after (.label-2::after) 来描述应该如何放置边框。我想我对伪元素的工作原理缺乏清晰的了解，因为这没有任何效果，哈哈。

如果有人对这样的设计有任何指导意见或可以解释我将如何实现这种效果，那将不胜感激。干杯。

编辑：理想情况下，我想在顶部有一个标题（div）。我想把这个标题放到这个标题中。

【问题讨论】：

我认为这需要更多关于您想要达到的最终结果的信息，有很多方法可以做到这一点，但不了解约束或方法很难回答
@savageGoat 我对你的意思感到困惑；我问了一个非常直截了当的问题。我想要一个代表标签的元素：1.有一个边框，2.有一个“标签”位于边框的左下角，左边有一点空间。
这实际上解释了这个想法
这个答案对你有用吗？
@savageGoat 是的。一旦我将 h4 更改为 div，它就可以完美运行。

标签： html css

【解决方案1】：

这应该可行。我在悬停时添加了一个额外的动画

.header-container {
  display: block;
  border: 2px solid #000;
  padding: 0 15px;
}

.header {
  transform: translateY(50%);
  background: #000;
  color: #FFF;
  display: inline-block;
  min-width: 50%;
  padding: 10px;
  transition: min-width ease-in-out 0.3s;
}
.header:hover {
  min-width: 98%;
}

<div class="header-container">
  <div class="header">Text</div>
</div>

【讨论】：