記事が少なければ修正は楽ですが、記事が増えてしまうと、1記事づつ修正していくのはかなりの重労働。
しかし、その変更したい箇所を擬似クラスでかこっていれば、CSSを1つ書くだけで簡単に付け加えることができるんです。
文頭は「before」、文末には「after」を使用します。
詳しい解説は以下にて！
擬似クラス内の文頭、文末に文章を追加してみよう
<div class="testab">テスト記事</div>上記のHTMLにCSSで文頭、文末に文章を追加してみます。
■文頭は「before」
.testab:before{content: "テスト文頭" ;}
■文末には「after」
.testab:after{content: "テスト文末" ;}
サンプルテスト記事
どうですか？文章が追加されてますよね？
marginなどの細かい装飾も可能です。
■サンプル1
.testab:before {content: "テスト文頭" ;
color:#3FC1C9;
font-size:20px;
margin-right: 10px ;
}
テスト記事
■サンプル2
.testab:after {content: "テスト文末" ;
font-size:30px;
border: 1px solid #ccc ;
margin-left: 10px ;
padding: 10px ;
background: #FFBC65 ;
}
テスト記事
注意点： 文章として認識されないため、SEOには不向きです。
画像を追加してみよう
■サンプル1
.testab:after {
content : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlpv08_ixSOJJkt1KAxEpxivXzgSUfo0fDlXfucLh9zKDlU38zBHjUa31Cin3EgJbSug_ELWAEPy7mHQLHH9osIN8wUoZnbFuCjCtNxhTV8R-kqEyHWOjbgYoZbkmLsucnGR4YjxtOwww/s1600/1481213541_smile.png) ; /* 画像URL */
margin-left:10px; /* テキストとの間隔 */
}
テスト記事
上記のようにただ画像を挿入するだけなら簡単にできます。
しかし、擬似要素を使用して画像を挿入する場合は、主にアイコンが目的の方が多いと思います。
アイコンの場合はまず、画像を最適のサイズのものを選び、位置を微調整する必要があります。
■サンプル2
.testab:before {
content : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqCRiNnUG4n-jMZHADnN5MzzMOc4_N3_3Dy63-2BE28Fz0NRrDrPCQWg00EsC8mKS6w2g-yK5chV3cQ4SXeDwl5l5E0q-qwZYTIdfKadHaJBLa56yAJybf5CZXviH8inUCxYNBwM6YpTQ/s1600/1481214657_list.png) ; /* 画像URL */
position:relative;
top:3px; /* 上下位置の微調整 */
margin-right : 5px ; /* テキストとの間隔 */
}
テスト記事
■その他のサンプル
アイコンサンプル
アイコンサンプル
アイコンサンプル
注意点： 画像のサイズは変更できないので、デザインを崩さないために最適サイズの画像を選ぶのがポイント！