Skip to content

Instantly share code, notes, and snippets.

Created December 18, 2012 19:19
Show Gist options
  • Save anonymous/4331037 to your computer and use it in GitHub Desktop.
Save anonymous/4331037 to your computer and use it in GitHub Desktop.
CSS to style a callout box. Great for count numbers. Eg. Fork count box in Github.
.count {
border: 1px solid #D4D4D4;
font-size: 11px;
font-weight: bold;
padding: 0px 8px;
line-height: 20px;
margin-left: 10px;
border-radius: 2px;
color: #333;
background-color: white;
position: relative;
}
.count:before {
content: "";
display: block;
width: 0;
height: 0;
border: 4px solid #D4D4D4;
border-color: transparent #D4D4D4 transparent transparent;
position: relative;
right: 17px;
margin-right: 0;
top: 13px;
margin-top: -6px;
}
.count:after {
content: "";
display: block;
width: 0;
height: 0;
border: 4px solid white;
border-color: transparent white transparent transparent;
position: relative;
right: 16px;
margin-right: -1px;
top: -9px;
margin-top: -6px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment