Skip to content

Instantly share code, notes, and snippets.

@rafbm
Created August 27, 2012 01:04
Show Gist options
  • Save rafbm/3484802 to your computer and use it in GitHub Desktop.
Save rafbm/3484802 to your computer and use it in GitHub Desktop.
CSS snippet for debugging meta descriptions and Open Graph tags with class
head, meta[name="description"], meta[property^="og:"] { display: block }
head {
position: relative;
z-index: 9999;
font: 21px/1.4 Didot;
color: #444;
-webkit-hyphens: auto;
padding: 2em;
background: #fff;
-webkit-font-smoothing: subpixel-antialiased;
}
meta[name="description"]::before {
content: attr(content);
display: block;
max-width: 80ex;
padding: 1em 1.2em;
border: 3px double #ccc;
margin: auto auto 2em;
}
meta[property^="og:"]::before {
content: attr(property);
font-weight: bold;
display: inline-block;
width: 19%;
text-align: right;
margin-right: 2%;
vertical-align: top;
}
meta[property^="og:"]::after {
content: attr(content);
display: inline-block;
width: 79%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment