要素の前後への要素の追加
公開日：2020-10-19
更新日：2020-10-24
更新日：2020-10-24
1. 概要
:before と :after を使うと、JavaScript を使わずに、スタイルシートだけで、要素の前後に他の要素を追加できます。
2. サンプル１
<h1>タグの前後に【 と 】を追加しています。
追加された文字列は、コピーすることができないため、装飾としての文字列に対して使用すると良いかもしれません。
追加された文字列は、コピーすることができないため、装飾としての文字列に対して使用すると良いかもしれません。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML・CSS・JavaScript</title>
<style>
.test:before { content: "【"; }
.test:after { content: "】"; }
</style>
</head>
<body style="background-color:#000; color:#fff;">
<h1 class="test">要素の追加</h1>
</body>
</html>
実行結果：【 】はあとから追加されてます。
3. サンプル２
position を使って、任意の位置に、重ねて表示することもできます。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML・CSS・JavaScript</title>
<style>
.test {
position:relative;
padding-left:25px;
}
.test:before {
position:absolute;
content:"";
left:0px;
top :12px;
width :20px;
height:20px;
background-color:red;
}
</style>
</head>
<body style="background-color:#000; color:#fff;">
<h1 class="test">要素の追加</h1>
</body>
</html>
実行結果：先頭の■はあとから追加されてます。
