CSSの:beforeと:afterを使ってちょっとした装飾をつけてみる

2012.09.11

CSSの:beforeと:afterを使ってちょっとした装飾をつけることができます。HTMLに直接こうした装飾を記述するのが嫌だなって時に使えますね。応用次第で色々と便利に活用できそうな感じです。ということで簡単ですが、以下やり方です。

[ads_center]

やり方

例えば見出しの横に「☆」なんかをつけたい場合。

<h3 class="sample">サンプルテキスト</h3>

.sample:before {
    content: "★☆ ";
    color: #F63
}

.sample:after {
    content: " ☆★";
    color: #F63;
}

こんな感じで前と後ろに星マークを入れることができます。

星マークを前と後ろに入れる

他にもテキストの後ろに「NEW」を入れたりとか。

.sample:after {
    content: " NEW";
    color: red;
    font-size: 12px;
}

こんな感じになります。よくありそうですね。

テキストの後ろに「NEW」を入れる

ということで、:beforeや:afterを使えばちょっとした装飾をつけることができるので便利ですね。

ちなみにこれを使えばblockquoteのデザインにも使えたりします。