CSSで要素の内容を追加から書き換えまでこなしてくれてる便利な方法！【CSS黙示録】

webページを作成している時にテンプレートなどHTMLには手を加えたくないが一部の内容を変更したい時が多くあります。

そんな時に便利なのが要素指定がしてある部分をCSSを利用して変えてしまうという方法があります。

例

下記HTMLと実行結果があったとします。

HTML

<div class=”test”＞てすと</>

実行結果

てすと

上記にCSSを利用して文章や画像などを追加することが可能！

CSSを使って変更

CSS

• content “文字” 指定した文字を追加
• url(URI) 指定URIの画像などを追加
• attr(属性) 指定した属性の値を利用

前後関係

要素の前・後を指定する必要があるので下記を利用します

before … 要素の前に追加したい場合
after … 要素の後に追加したい場合

前例(before)

.test:before {
content: “文字”;
}

後例(after)

.test:after {
content: “文字”;
}

書き換えたい場合

追記したい場合で紹介してきましたが書き換えることも可能です。

例のてすとをテストに書き換えたい場合は初めに文字サイズを０にしてから書き換えたい文字のサイズを指定して書き換えたい内容を記載し書き換えることができます。

書き換え例

.test {font-size: 0px;}

.test:before {
font-size: 30px;
content: “テスト”;
}