Skip to content

Instantly share code, notes, and snippets.

@schadeck
Created May 14, 2012 17:39
Show Gist options
  • Save schadeck/2695261 to your computer and use it in GitHub Desktop.
Save schadeck/2695261 to your computer and use it in GitHub Desktop.
Playing with :before, and :after pseudo-elements
/**
* Playing with :before, and :after pseudo-elements
*/
.example {
background: #bada55;
display: inline-block;
}
.example:before {
content: ">";
width: 2em;
height: 2em;
display: inline-block;
text-align: center;
line-height: 2em;
border-right: 1px solid #a9c944;
margin-right: 1em;
color: #fff
}
.example:after {
content: "<";
width: 2em;
height: 2em;
display: inline-block;
text-align: center;
line-height: 2em;
border-left: 1px solid #a9c944;
margin-left: 1em;
color: #fff
}
<!-- content to be placed inside <body>…</body> -->
<span class="example">this</span>
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment