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. CSSで文字の長さに合わせる

    CSS

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

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

  2. (cs)spinner

    CSS

    CSSだけでミニマルなローディングアニメーションを実装できる「(cs)spinner」

    CSSだけでローディングアニメーションを実装できる「(cs)spinn…

  3. CSS Only Fab Icon Menu

    CSS

    CSSで実装できるコンパクトで可愛いメニュー「CSS Only Fab Icon Menu」

    CSS Only Fab Icon MenuはCSSによるコンパクトで…

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

    CSS

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

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

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

    CSS

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

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

コメント

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

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

最近の記事

  1. ネクスタイム
  2. フォールドオーバーポーチ
  3. 田沢湖
  4. ハクバ シリコンクロス
  5. トライポッドスリーブ

Instagram始めました

Facebookページ

PAGE TOP