geta6 · August 23, 2012 03:35
diff --git a/index.html b/index.html
 <html>
  <head>
    <link rel='stylesheet' href='style.css'>
  </head>
  <body>
    <div id='target'></div>
    <input id='button' type='button' value='click'>
    <script src='script.js'></script>
  </body>
 </html>
diff --git a/script.js b/script.js
 (function () {
  var target = document.getElementById('target')
    , button = document.getElementById('button');

  button.addEventListener('click', function () {
    target.setAttribute('data-content', 'this is before content');
  }, false);
 }());
diff --git a/style.css b/style.css
 #target:before {
  display: block;
  content: attr(data-content);
  width: 160px;
  height: 90px;
  color: white;
  background: red;
 }
	<html>
	<head>
	<link rel='stylesheet' href='style.css'>
	</head>
	<body>
	<div id='target'></div>
	<input id='button' type='button' value='click'>
	<script src='script.js'></script>
	</body>
	</html>
	(function () {
	var target = document.getElementById('target')
	, button = document.getElementById('button');

	button.addEventListener('click', function () {
	target.setAttribute('data-content', 'this is before content');
	}, false);
	}());