CSSでspanのテキスト上書きしたい。

Question

<button type="submit" class="stripe-button-el" style="visibility: visible;">
<span style="display: block; min-height: 30px;">Hello World</span></button>

実現したいこと

javascriptを使わずにcssだけでspanのテキスト書き換えたい。

試したこと

// ここでコンテントを使ってHello Worldをhogeに書き換えたい。
span:before {
  content: 'hoge';
}
//下記は特にやりたいことに関係ない
button.stripe-button-el,
button.stripe-button-el>span {
  background-color: #fd5c63 !important;
  background-image: none;
  width: 100% !important;
}

困っていること

一応,contentを使用することでhogeHellor Worldとすることまでは出来たが、元のテキストを削除できずに困っています。

Answer 1

擬似要素に背景をつけてテキストに被せてしまえば見た目には消せます（隠れているだけですが）。

Comments

[rails_ruby]

擬似的には一応出来るんですね。
勉強になりました。

Answer 2

javascriptを使わずにcssだけでspanのテキスト書き換えたい。

CSSには、テキストノードを参照する機能がありませんので、「不可能」です。

Re: rails_ruby さん

Comments

[rails_ruby]

やっぱりそうでしたか、、
ご教示いただき有難うございました。