Skip to content

Instantly share code, notes, and snippets.

@weirdpattern

weirdpattern/.2019.01.16.adding-content-via-css-attr

Created January 16, 2019 18:56
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save weirdpattern/2bb448a481028531f6d783260f0cbcda to your computer and use it in GitHub Desktop.
Save weirdpattern/2bb448a481028531f6d783260f0cbcda to your computer and use it in GitHub Desktop.
Download ZIP
Raw
.2019.01.16.adding-content-via-css-attr
2019.01.16.adding-content-via-css-attr
Raw
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>
Raw
syntax.text
<selector>:[before|after] {
content: [attr(<attribute>) | 'plain text']
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment