position a text element relative to another-CodePudding

I have a form that carries info from one HTML to another using local storage. Since this text changes based on what the user inputs on the first HTML, I have to find a way to add a text element that stays with the output. For example: if a user types "Luke" and submits, ideally the next page will say "Luke's" (the "'s" being the separate text element). Since the text might be longer e.g. Lukas or Lucius, the "'s" text element has to stay at the end of the previous one regardless of its length.

<h1 id="show">
<!-- this is where the output text shows -->
      </h1>

<h1 >'s epic <!-- this is what i want to stick to the  end of the output element -->
</h1>

I should also add that this JS isn't working...

  <script>
      
      document.getElementById("show").textContent  = "'s";
    </script>

CodePudding user response：

You can use an :after pseudo element for this. Its defined content will be added to any element that has the class it refers to, and it will be automatically styled the same way as the element it's appended to:

.epic1:after {
  content: "'s epic";
}

<h1 >Tom</h1>

CodePudding user response：

Not sure if it's the best way, but I added a div with a new class around the show element and used the ::after in css to add content.

.hey ::after {
  font-weight: bold;
  color: black;
  content: "'s";
}

<div >
  <h1 id="show">
  </h1>
</div>