Patricio Treviño · 16 January, 2019 · 2 min read

Adding content via css content/attr functions

Syntax

      
        <selector>:[before|after] {
      
          content: [attr(<attribute>) | 'plain text']
      
        }

view raw syntax.text hosted with ❤ by GitHub

Option	Description
attribute	The name of the attribute to be used to populate content.

Example

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

view raw example.html hosted with ❤ by GitHub

Output

References

content and attr() (https://developer.mozilla.org/en-US/docs/Web/CSS/content)

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