将元素背景覆盖在自己的边界上

Question

我想让标题的样式看起来如下：视觉表征。

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

如果任何人有任何领先的设计这样的设计，或可以解释我如何实现这一效果，这将是非常感谢。干杯。

编辑:理想情况下，我希望在顶部有一个标题(div)。我想把这个标题放到这个标题中。

Answer 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>

​