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のデザインにも使えたりします。

関連記事

  1. 背景画像のロゴをRetinaに対応させるCSS

    CSS

    背景画像のロゴをRetinaディスプレイに対応させるCSSのやり方

    背景画像のロゴをMacのRetinaディスプレイに対応させるCSSのや…

  2. li要素の折り返したテキストを揃える

    CSS

    li要素のテキストを折り返した時に頭文字の余白を揃えるやり方

    またどこかで使いそうな感じがしたので記録として残しておきます。ulのl…

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

    CSS

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

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

  4. Animated Transition Effects
  5. CSS

    CSS3のtransformを使えば要素を全体的に拡大するやつはめっちゃ簡単にできた

    前回、「jQueryでマウスオーバーした時に要素を全体的に拡大するやつ…

  6. CSS

    CSS3でフォントサイズを指定する単位は「rem」がとても便利

    CSS3から新しく出来たフォントサイズ指定の単位「rem」がとても便利…

コメント

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

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

最近の記事

  1. 16インチMacBook Pro
  2. レトロスペクティブ V2.0
  3. YAECA ワイドテーパードデニム 10-13WW

アーカイブ

PAGE TOP