How to write a text replacement in the .pp2 selector using css?

Question

css

:after and before are not suitable because they do not remove, but complement the text.
allowable

<div>

bal bla bla

</div>

you need to change the original in the div to hello
using css how?

Answer 1

What if we initially make the div empty, and change the content for :after

.pp2::after{
    content: "bal bla bla";
}
.pp2:hover .pp2::after{
    content: "hello";
}

or create a second one with the desired content and change the display

Answer 2

#slog {
    color: black;
   
    position: relative;
  }
  #slog::after {
    color: #497349;
    content: "профессор";
    
    position: absolute;
  }

As an option, such a design, and your suggestions?