Category
Archives
Cocotiie
Trial And Error!やってみよう!の精神でWeb制作をしています。初心者の方にも伝わるよう、心がけています。少しでも誰かの助けになれれば嬉しいです。宜しくお願い致します。

2006年:Web制作に関する覚書きブログをはじめる。

2018年:Cocotiie(ココッティー)として運営開始。
このサイトは快適なテーマ「SWELL」を使用していますSWELLについて

[CSS]:befor や :after 擬似要素を活用する

CSS

擬似要素:befor は何かの前に何かを表示する事ができます。擬似要素 :after は何かの後ろに何かを表示する事ができます。

htmlでリンクにアイコンを付けたりすると、ソースコードがゴチャゴチャしますし、その都度書くのも面倒ですよね?CSSで表示されるようにしちゃいましょう。便利な:befor 、:afterの使い方をご紹介します。

ソースが汚れるのを防ぐだけでなく、工夫次第ではhtmlには表示されないので、検索エンジンにインデックスさせずに何か表示する事もできます。

なお、CSS2では「:after」でしたが、CSS3で「::after」に変更されたそうです。

INDEX

擬似要素でアイコン画像を付ける

:before
a::after {
   content: url(image/web.jpg);
}

画像のパス、画像の名前は任意です。ご自分の状況で修正して下さい。それから画像の位置を必要に応じて調整をして下さいね。

擬似要素でFont Awesomeのアイコンを付ける

:before

このサイトの記事のタイトルに付いている はこの方法で表示させています。

.entry-title::before {
    font-family: "Font Awesome 5 Free";
    content: "\f1b2";  
    padding-right: 6px;

擬似要素でテキストを表示する

content: “ここに入れた文字”; が表示されます。

:before
 dt::before {
    content: "おすすめ!";
    color:red;
    }

必須項目に*を付けたり

:before
dt.must::after { /*class="must"とした場合*/
   content:"*";
   color:red;
}

擬似要素でテキストを表示する 応用編

CSSで表示しているので、html上には出力されません。なので、検索上どうでも良い様なキャッチコピーとかデザインとして表示させたいと時に使えます。

:after
<h1 class="coco ">ココッティ―</h1>
.coco {
    text-align: center; 
}

.coco::before{
  content: 'Cocotiie';
  font-size:200%;
  display: block; /*改行*/
}

html上は「ココッティ―」だけしか出力されません。

display: block;で改行する件で参考にさせて頂きました。

blockは改行が入り、縦に重なると。分かりやすかったです。

よかったらシェアお願いします
  • URLをコピーしました!
  • URLをコピーしました!

コメント ※ハンドルネームでお願いします

コメントする

INDEX