| Example | Name | Class |
plus | .before-plus | |
minus | .before-minus | |
times | .before-times | |
times-large | .before-times-large | |
circle-plus | .before-circle-plus | |
circle-minus | .before-circle-minus | |
circle-times | .before-circle-times | |
hash | .before-hash | |
ellipsis | .before-ellipsis | |
ellipsis-midline | .before-ellipsis-midline | |
ellipsis-vertical | .before-ellipsis-vertical | |
arrow-left | .before-arrow-left | |
arrow-right | .before-arrow-right | |
arrow-up | .before-arrow-up | |
arrow-down | .before-arrow-down | |
triangle-left | .before-triangle-left | |
triangle-right | .before-triangle-right | |
triangle-up | .before-triangle-up | |
triangle-down | .before-triangle-down | |
asterisk | .before-asterisk | |
menu | .before-menu | |
checkmark | .before-checkmark |
Use class .after-right to float right .after-{icon}.
available: .after-left .after-right .before-left .before-right.
<div class="...after-plus after-right">Open This</div>
<div class="...after-minus after-right">Close This</div>
Pseudo elements inherits font-color and size.
<div class="...after-plus after-right">Open This</div>
<div class="...after-minus after-right"><span class="red">Close This</span></div>
Pseudo elements inherits font-size. But if you want to increase or decrease size, you can use scale class like .after-scale-up-3.
<div class="...after-plus after-right">...</div>
<div class="...after-plus after-right after-scale-up-3">...</div>
Margin can be applied on pseudo elements, you can use margin class like .after-mr-5.
<div class="...before-menu">Without margin</div>
<div class="...before-menu before-mx-3">With margin</div>
<button class="button after-arrow-right after-ml-3">Enter</button>
<h2 class="before-hash before-mr-2 gray-lighter hover-gray-light"><a href="#" class="gray no-underline">pseudo elements</a></h2>