Element moves away from current position on transition

Issue

I have a word to which I want to add two letters. Those two letters are supposed to be somewhere within (not at the start or the end) the word and should also fade into the word on hover. The word is placed directly in the main wrapper element of my page, which is a flex body. The word itself has to have a fixed position, and it has to be vertically placed in the top left corner of the screen. I cannot apply something like width: 100%; to the element because then it wouldn't stick to the same position on all screen sizes.

However, once I hover over the word, it moves out of its position, even though it shouldn't. Technically, it should only expand in a way that makes its own container slightly larger so the two new letters fit.

As of right now, I'm trying to use a transition to achieve the insertion of the letters:

.main-element {     /* h1 */
    position: fixed;
    ...
}
.element-to-appear {     /* span */
    position: absolute;
    opacity: 0;
    transition: opacity .5s;
}
.main-element:hover .element-to-appear {
    opacity: 1;
}

In the example above, main-element is the word, and element-to-appear is the two letters (contained in a <span> element within the main text) that are supposed to be inserted. Additionally, I'm also pushing away the last few characters of the word (also contained in a <span>) in order to make space for the new letters:

.main-element:hover .remaining-letters {     /* span */
    margin-left: -10px
}

Here also is a small illustration of what I'm trying to achieve:

To get rid of the problem, I already tried the following, hoping it would result in the two letters being inserted without the text moving out of its position:

• Changing display values on hover: I tried to change the display value on the letters from none to inline-block, which made the letters appear, but the problem persisted.
• I tried the aforementioned transition method, making use of opacity and position: absolute;.
• I tried changing the width of the element to fit the entire screen, but this did not work on any other screen sizes.
• I tried applying different display values to the parent, which broke the hover effect entirely.
• I tried other positioning methods besides fixed, but the problem persisted.
• I tried to apply ::before to the span containing the letters coming behind the letters to be inserted, which seemed to sort of work at first, but I had to assign weird margins to the <span>, which made the entire text "jump" out of position for a second before it returned to normal - I really want to evade something like this.
• Ultimately, I also assigned margins to the text, which would move it back into place on hover, but this made the whole transition look "jumpy" once again.

Here is the entire code relevant to the problem:

JSFiddle (I couldn't create a Stack Snippet for some reason, so I also made a JSFiddle and just provided the code blocks alone)

HTML:

<div class="wrapper">
    <h1 class="main-element">test-wor<span id="element-to-appear">rr</span><span id="remaining-letters">d.</span></h1>
</div>

CSS:

.wrapper {
    display: flex;
    width: 100%;
    height: 100%;
    margin: 0;
}
.main-element {
    position: fixed;
    left: 100px;
    top: -100px;
    rotate: 90deg;
    color: black;
}
#element-to-appear {
    display: inline-block;
    position: absolute;
    opacity: 0;
    transition: opacity .5s;
}
#remaining-letters {
    transition: .6s;
}
.main-element:hover #element-to-appear {
    opacity: 1;
}
.main-element:hover #remaining-letters {
    margin-left: 50px;
    transition: .25s;
}

What is supposed to happen in the snippet is that the element moves further to the top and the right when it shouldn't. It should stay in the same position but expand in a way that the new letters fit, but the element stays in the same position (essentially, it should only expand downwards).

I have already tried a lot, but I'm clueless as to what else I could try. I am open to using JS and JQuery or any other tool for that matter.

Thank you in advance for your help!

Solution

Add transform-origin: left to your .main-element.

Even though it looks like the rotated text's width is only taking up about 20 pixels, the DOM is still making enough room for the element as if it weren't rotated. You can see it clearly with this debug example I made. Since transform-origin is set to center by default, the rotated element is kept in the center of the space the DOM made for it.

Here is a working example (I adjusted a few things to make it easier to view on Stack Overflow):

.wrapper {
  display: flex;
  width: 100%;
  height: 100%;
  margin: 0;
}

.main-element {
  position: fixed;
  /* 
    it might be necessary to run the fiddle without the 'left' and 'top' values once
    and then reassigning them and running it again, it somehow seems to be broken on
    JSFiddle 
    */
  left: 50px;
  top: 10px;
  rotate: 90deg;
  color: black;
  transform-origin: left;
}

#element-to-appear {
  display: inline-block;
  position: absolute;
  opacity: 0;
  transition: opacity .5s;
}

#remaining-letters {
  transition: .6s;
}

.main-element:hover #element-to-appear {
  opacity: 1;
}

.main-element:hover #remaining-letters {
  margin-left: 50px;
  transition: .25s;
}

<div class="wrapper">
  <h1 class="main-element">test-wor<span id="element-to-appear">rr</span><span id="remaining-letters">d.</span></h1>
</div>

Answered By - Rico