<h2>Adding pseudo-elements to meta tags and link elements</h2>

<p>The elements above are meta tags and link elements, in the head of the document. These are void elements (no closing tag) but you can add pseudo-elements to them.</p>
<p class="p">Demo by Louis Lazaris. <a href="http://www.sitepoint.com/12-little-known-css-facts-the-sequel" target="_blank">See article</a>.</p>
body {
  text-align: center;
  padding: 0 20px;

head {
  display: block;

meta, link {
  display: block;
  background: lightpink;
  border: solid 1px;
  padding: 14px;
  margin: 10px;

link:before {
  content: "This is a link (stylesheet) element";

meta:before {
  content: "This is a meta element";

p {
  max-width: 700px;
  margin: auto;

.p {
  font-family: Arial, sans-serif;
  font-size: 14px;
  padding-top: 130px;

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.