We have created some pseudo element shorthand classes for frequently used unicode icons. These icons are commonly used with buttons and navigation to make UI more interactive
| 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 shorthands:
.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>