CSSの擬似要素::beforeや::afterのcontentプロパティを動的に変更する方法 #JavaScript

CSSの擬似要素::beforeや::afterを使って、文字列や画像等を挿入する際にcontentプロパティを使用しますが、基本的には値をjQueryで直接変更することができません。

理由はそもそも擬似要素は非DOMであるため、JavaScriptから操作することができないようです。

そんな時に値を動的に変更するための方法をまとめます。

方法として「content:attr(属性名)を使って変更する」という方法があります。

詳しく説明するとここにある**attr()**は、()内に属性名を指定すると、擬似要素が設定されている要素の属性の値を、contentプロパティの値として指定することができます。

そしてjQueryでは要素に対して「.attr( 'warning-message', '請求IDが重複しています。' );」とコンテンツを挿入する設定をすることで動的にコンテンツの中身（テキスト）を変更できるようになります。

例

要素名::before{
  content: attr(属性名);
}

jQuery

$( 'クラス名' ).attr( '属性名', '値' );