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. nth-child()とnth-last-child()

    CSS

    CSSのnth-child()とnth-last-child()の使い方をまとめてみる

    毎回使おうとする度に記憶が曖昧になっちゃってるんでここにまとめておこう…

  2. CSSでテキストを縦にするやり方

    CSS

    CSSでテキストを縦の位置にするやり方

    ちょっと便利そうだったのでメモがてらご紹介。CSSでテキストを縦の位置…

  3. CSS

    よく見かけるblockquoteの左上と右下にダブルクォートつけるやつをCSSだけで作ってみる

    blockquoteのデザインって色んなパターンがあって面白いですよね…

  4. Three Dots

    CSS

    シンプルで可愛いCSSローディングアニメーション「Three Dots」

    Three Dotsはアニメーション付きのシンプルで可愛いCSSローデ…

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

    CSS

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

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

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

    CSS

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

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

コメント

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

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

最近の記事

  1. TAP-F27-2KP
  2. M32ミニ
  3. CITTA TT5.0
  4. Kindle Oasis

アーカイブ

PAGE TOP