[SOLVED] How to add block with diffrent color right next to block

How to add block with diffrent color right next to block

I would like to add black block after red one with text, similiar like on the example (first screenshot)

I was trying to do it like that, but it doesn't work. I'm new to CSS... :/

h2 {
    width: fit-content;
    background-color:#FF0000;
}
h2:after {
    display: block;
    width: 50px;
    background-color:#000000;
}

How can I achive something like this?

Solution

Just use a box-shadow instead of a pseudo-element.

body {
  background-image: url(https://images.unsplash.com/photo-1720247522784-ba24b938534d?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MjI3MDM4NTZ8&ixlib=rb-4.0.3&q=85);
  background-size: cover;
  display: flex;
  justify-content: center;
}

h2 {
  width: fit-content;
  background-color: rgba(0, 0, 0, .25);
  padding: 0 1em;
  box-shadow: -.25em 0 red;
  color: white;
}

<h2>My Small Heading</h2>