weirdpattern · January 16, 2019 18:56
diff --git a/.2019.01.16.adding-content-via-css-attr b/.2019.01.16.adding-content-via-css-attr
 2019.01.16.adding-content-via-css-attr
diff --git a/example.html b/example.html
 <html>
  <head>
    <style>
      .simple:before {
        content: attr(message) ", I'm a div with a 'message' attribute";
      }  

      .data-based:before {
        content: attr(data-message) ", I'm a div with a 'data-message' attribute";
      }
    </style>
  </head>
  <body>
    <div class="simple" message="Hello there"></div>
    <div class="data-based" data-message="Hello there"></div>
  </body>
 </html>
diff --git a/syntax.text b/syntax.text
 <selector>:[before|after] {
  content: [attr(<attribute>) | 'plain text']
 }
	<html>
	<head>
	<style>
	.simple:before {
	content: attr(message) ", I'm a div with a 'message' attribute";
	}

	.data-based:before {
	content: attr(data-message) ", I'm a div with a 'data-message' attribute";
	}
	</style>
	</head>
	<body>
	<div class="simple" message="Hello there"></div>
	<div class="data-based" data-message="Hello there"></div>
	</body>
	</html>
	<selector>:[before\|after] {
	content: [attr(<attribute>) \| 'plain text']
	}