CSS/HTML：テキストの値を変更し、ホバーの中心から拡大しますか？

Question

これを達成する方法はわかりませんが、ホバー上のpの実際のテキストを変更する必要があります - 別のpまたはdivに完全に移行するか、テキスト値を変更してください。

これを長い文字列に変更する必要があります。文字列の中央からマウスを置いて長いテキストに「拡大」または拡大し、マウスがdivにないときに戻したいと考えています。これどうやってするの？ CSSを使用できますか？

Answer 1

織り：http://kodeweave.sourceforge.net/editor/#c7c341cc65302aebaca1c9f89d91b726

私はこれを実現するかどうかはわかりませんが、ホバー上のAPの実際のテキストを変更する必要があります...

あなたが行うことができる唯一の方法純粋なCSSでこれはCSS contentプロパティを使用することです。あなたが本当にあなたの内容を変更する（スタイリングWebページ用）CSSを使用することはできません

body { 
 
    padding: 1em; 
 
} 
 
.change-content { 
 
    cursor: pointer; 
 
    display: block; 
 
    width: 100%; 
 
    padding: 0.48em 1em; 
 
} 
 
.change-content:after { 
 
    content: 'Hello'; 
 
} 
 
.change-content:hover:after { 
 
    content: 'World'; 
 
}

<link href="https://necolas.github.io/normalize.css/4.1.1/normalize.css" rel="stylesheet"/> 
 

 
<button class="change-content"></button>