Overlaying An Element Background over Its Own Border-CodePudding

I would like to make a style of heading that looks like this: Visual Representation.

What I tried was using a class (.label-2) to describe the background colour and ::after (.label-2::after) to describe how the border should be placed. I think I lack a clear understanding of how pseudo-elements work as this had no effect whatsoever lol.

If anyone has any leading points to designs like this or can explain how I'd achieve this effect, that'd be greatly appreciated. Cheers.

Edit: Ideally, I would like to have a header (div) at the top. I would like to place this heading into this header.

CodePudding user response：

This should work. I added a extra animation on hover

.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 >
  <div >Text</div>
</div>