Как через css прописать замену текста в селекторе .pp2?

Question

[Игорь]

:after and befor не подходят потому что не удаляют а дополняют текст.

допустим

<div>

bal bla bla

</div>

нужно исходное в диве поменять на hello
через css как?

Comments

[mletov]

А чем не устраивает javascript, почему именно css?

[Игорь]

mletov: ТЗ только через CSS.
В сторону JS смотреть нельзя .

[mletov]

Ну хорошо, а в какой момент должна просиходить замена контента, сразу после загрузки страницы или по какому-то событию, например, при наведении на div?

И, главное, какова конечная цель таких манипуляций? Это для поисковиков, для людей с отключенным JS или еще зачем?

Answer 1

[M K]

А что, если изначально сделать div пустым, и менять контент для :after

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

или создать второй с нужным контентом и менять display

Comments

[Игорь]

доступа к html and JS мы не имеем толькo к CSS

[M K]

Игорь: codepen.io/anon/pen/VvErwQ

[Игорь]

Максим Кудрявцев: СПАСИБО ВАМ БОЛЬШОЕ!
А

[Игорь]

я и не знал про font-size 0!

[Игорь]

Дадите ваш вк?)

Answer 2

[Игорь]

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

Как вариант такая конструкция,а Ваши предложения?