Skip to content

Instantly share code, notes, and snippets.

@ryngonzalez
Created November 19, 2013 23:21
Show Gist options
  • Save ryngonzalez/7554407 to your computer and use it in GitHub Desktop.
Save ryngonzalez/7554407 to your computer and use it in GitHub Desktop.
CSS divider using :after and :before pseudo elements.
%divider {
&:after, &:before {
display: block;
position: absolute;
}
&:after {
text-transform: none;
text-shadow: none;
@include rem(font-size, 12px);
text-align: center;
color: #EBF7FF;
left: 46%;
bottom: -43px;
height: 16px;
width: 16px;
background: #062F4C;
margin: 0 auto;
padding: 6px;
border-radius: 100%;
}
&:before {
width: 100%;
content: '';
border-bottom: 2px solid #062F4C;
bottom: -30px;
}
}
@mixin divider($text: "or") {
@extend %divider;
&:after { content: $text; }
}
// @include the divider mixin on the element before the division should take place
div {
@include divider("or");
}
@pepeloper
Copy link

@ben-shepherd The following code on line 9 references a mixin called rem.

@include rem(font-size, 12px);

You can just delete that line and/or replace with any font-size you want.
If you want to learn more about mixins you can give a shot to the sass docs at Mixins guide

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