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

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

<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>

ここをクリック

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