kawama.jp

cssの:before、:afterがけっこう便利

カテゴリ: Ajax,JavaScript,CSS — タグ: , , — 2013年5月15日 22:26 — Comments (0)hatebu count

今更ながらその便利さに気が付きました。

<style type="text/css">
.before_after_test1:before { content: "("; }
.before_after_test1:after { content: ")"; }
.before_after_test2:before { content: "[ "; }
.before_after_test2:after { content: " ]"; }
</style>

<div class="before_after_test1">カッコ1</div>
<div class="before_after_test2">カッコ2</div>

↑こうすると

↓こうなります

カッコ1
カッコ2

・ ・ ・

こんなことも

<style type="text/css">
.before_after_on:before { content: "スイッチオン:"; }
.before_after_off:before { content: "スイッチオフ:"; }
</style>

<div class="before_after_test3 before_after_off" style="text-decoration:underline;color:blue;cursor:pointer;">ここをクリック</div>

<script type="text/javascript">
$(function(){
$('.before_after_test3').click(function(){ $(this).toggleClass('before_after_on').toggleClass('before_after_off'); });
});
</script>

ここをクリック

うまく使えばきれいなコードが書けると思います。

コメントはまだありません »

No comments yet.

RSS feed for comments on this post. TrackBack URL

Leave a comment

Copyright (C) 2002 - 2017 kawama All Rights Reserved. — Powered by WordPress