T.Takahashi CSSの疑似要素beforeとafterの簡単な使い方 2017-06-23T04:39:12Z
０；ゼロからはじめる！

【最終更新日：2017/06/23】 HTML5 ブログカスタマイズ

CSSの疑似要素beforeとafterの簡単な使い方

beforeとafterを使うとどうなるの？

要素の前後にスタイル要素を追加できるようになる。

記述の仕方

たとえば

?
HTML例
1
2
3
4
5
6
7
8
9
10
11
h1::before{
  content: 'Hello!';
}
h1::after{
  content: 'World!';
}
</style>
 
<h1>こんにちは</h1>

とHTMLがあったとする。

動作としては、

  1. <h1>こんにちは</h1>h1タグに対して
  2. h1::beforeを実行。「Hello!」を表示する
  3. h1タグの「こんにちは」を表示する
  4. h1::afterを実行。「World!」を表示する
となる。

と表示される。

::beforeと:beforeどっちが正しい？

:(コロン)は、２つが正しい？それとも１つが正しい？

  • １つの場合は、CSS2での記述
  • ２つの場合は、CSS3での記述

ただし、CSS3の対応がされてないブラウザもあるので、今はまだ１つでの記述が良いと思われる。今後は、対応が進めば２つでの記述が一般的となるだろう。

スポンサーリンク

使用例

clearfixの使用

.clearfix::afterにすることによりリストを表示した後にフロートの解除を行う。

?
HTML+CSS例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
ul {
  width:1040px;
  margin:0 auto;
}
ul li {
  float:left;
  width:260px;
}
.clearfix::after{
  content:"";
  clear:both;
  overflow:hidden;
}
 
<ul class="clearfix">
  <li>メニュー１</li>
  <li>メニュー２</li>
  <li>メニュー３</li>
  <li>メニュー４</li>
</ul>

リスト表示に使う（その１）

.clearfix::afterにすることによりリストを表示した後に※印の表示を行う。

?
HTML+CSS例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.notes li {
  list-style: none;
}
.notes li::before {
content: "※";
padding-right: 5px;
color: red;
}
 
<ul class="notes">
  <li>注釈文○○○○</li>
  <li>注釈文○○○○</li>
  <li>注釈文○○○○</li>
  <li>注釈文○○○○</li>
</ul>

リスト表示に使う（その２）

.clearfix::afterにすることによりリストを表示した後に※印の表示を行う。

?
HTML+CSS例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
.info li {
  list-style: none;
}
li.new:before {
content: "new";
margin-left: 5px;
color: #fff;
background: red;
padding: 1px 3px;
}
li.update::after {
content: "update";
margin-left: 5px;
color: #fff;
background: blue;
padding: 1px 3px;
}
li.lookup::after {
content: "lookup";
margin-left: 5px;
color: #fff;
background: green;
padding: 1px 3px;
}
 
<ul class="info">
  <li class="new">お知らせ１○○○○</li>
  <li class="update">お知らせ２○○○○</li>
  <li class="lookup">お知らせ３○○○○</li>
</ul>

まとめ

こんなことが出来るようになる。さらにグラフィックアイコンやhタグの装飾などいろいろなことにしよう出来る。それはまた今度の機会にでもレクチャーしよう！では、いろいろ工夫して使ってみてよう！

関連記事


0 件のコメント :

コメントを投稿