CSS

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

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

[ads_center]

やり方

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

HTML

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

CSS

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

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

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

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

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

CSS

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

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

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

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

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

シンプルな構成で簡単に実装することができるツールチップ「jQuery PowerTip」前のページ

マウスオーバーなどで画像を拡大してくれるシンプルなjQueryプラグイン「jQuery Zoom」次のページ

関連記事

  1. CSSで文字の長さに合わせる

    CSS

    CSSで文字の長さにwidthを合わせてbacgroundやborderを表示させるやり方

    CSSでブロック要素のwidthを文字の長さに合わせるやり方をご紹介し…

  2. CSS

    ulのリストを横並びにしてtext-alignを適用させる方法

    ちょっと悩んじゃいました。ulのli要素を横並びにしてそれにtext-…

  3. littlebox

    CSS

    CSSだけで作られたシンプルで可愛いアイコンセット「littlebox」

    littleboxは画像を用いずにCSSだけで作られたシンプルなアイコ…

  4. CSS

    リストを横並びにした際に簡単に均等にすることができるdisplay:table-cellを使ってみる…

    リストを横並びにした際にli要素の幅を簡単に均等にすることができるdi…

  5. CSSで上下の要素を入れ替えて配置させるやり方

    CSS

    CSSのレイアウトで上下の要素を入れ替えて逆に配置させるやり方

    CSSでレイアウトを組む時に、上下に二つ並んでいる要素を入れ替えて逆に…

  6. CSS

    CSSだけを使ったストライプ(斜め・水平・垂直など)の作り方

    CSSだけを使ったストライプの作り方「Stripes in CSS」が…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. SV-S251
  2. スラウェシ トラジャ
  3. 梅
  4. CAR-HLD12BK

アーカイブ

PAGE TOP