CSSの擬似要素「:before」「:after」の使い方

■HTML

Sample

■css

.sample:before {
content: “before”; /* 前方に文字列:beforeを挿入*/
font-size: 150%; /* フォントサイズを150%にする */
color : #4ECDC4; /* 文字色を緑色にする */
font-weight: bold ; /* 太文字にする */
}

.sample:after {
content: “after”; /* 後方に文字列afterを挿入*/
font-size: 150%; /* フォントサイズを150%にする */
color : red; /* 文字色を赤にする */
font-weight: bold ; /* 太文字にする */
}

■参考サイト

http://webnonotes.com/css/css-before-after/