Is there a way to change the direction an element's width resizes to?-CodePudding

For example if I have a h1 element with the value "hello" with background-color: pink;, if the width of this element is shrunk to 10px it looks like this by default: https://i.stack.imgur.com/r4s4S.png .

I am wanting the pink part of the element (the background color) to be on the other side of the h1 element (closer to where "o" is, not "H").

What I have tried:

I have tried float: right on the h1 element but that moves the element off screen when the width is changed

and

I have tried giving h1's width a negative value (unsure why this didn't work).

My current HTML code:

<h1 style="background-color: pink; width: 10px;">hello</h1>

CodePudding user response：

You can use ::after selector of h1 element for this.

h1{
  display:inline-block;
  position:relative;
}
h1::after{
  position:absolute;
  content:"";
  top:0;
  right:0;
  width:10px;
  height:100%;
  background:pink;
  z-index:-1;
}

<h1>hello</h1>