Skip to content

Instantly share code, notes, and snippets.

@lsmith

lsmith/iOS_details_arrow.css

Created March 6, 2011 07:56
Show Gist options
  • Star 4 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save lsmith/857131 to your computer and use it in GitHub Desktop.
Save lsmith/857131 to your computer and use it in GitHub Desktop.
Download ZIP
The CSS to create an iOS details call-to-action arrow
Raw
iOS_details_arrow.css
/* assumes .details is position: relative */
.details::after {
content: '';
position: absolute;
border-top: 3px solid #7f7f7f;
border-right: 3px solid #7f7f7f;
height: 6px;
width: 6px;
top: 50%;
right: 12px;
margin-top: -3px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
@ericf
Copy link

ericf commented Mar 6, 2011

I was curious about the double ‘::’ vs. just :after, and learned something from the Mozilla Developer Center:

The ::after notation was introduced in CSS 3 in order to establish a discrimination between pseudo-classes and pseudo-elements. Browsers also accept the notation :after introduced in CSS 2.

@mathiasbynens
Copy link

Here’s a demo: http://jsfiddle.net/mathias/Xtqcn/show/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment