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

css.php