CSS before / after symbol shortcuts
* content:'\002A';
> content:'\003E';
| content: '\007C';
div {
position: relative;
}
div:after {
content: '\002A';
position: absolute;
top: 0;
right: -5px;
}
div:before {
content: '\002A';
position: absolute;
top: 0;
left: -5px;
}
// small arrow / greater than after link (graphical)
http://cssarrowplease.com/
a {
padding-right: 4px;
position: relative;
&:after, &:before {
left: 100%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
&:after {
border-color: rgba(255, 255, 255, 0);
border-left-color: #FFF;
border-width: 2px;
margin-top: -2px;
}
&:before {
border-color: rgba(0, 0, 0, 0);
border-left-color: #000;
border-width: 3px;
margin-top: -3px;
}
}
// with background image
p.config {
position: relative;
font-style: italic;
padding-left: 22px;
margin-bottom: 2.8em;
}
p.config:before {
width: 20px;
content: " ";
background: url(images/sm-blue-arrow.png) no-repeat;
background-size: 15px 15px;
position: absolute;
left: 0;
top: 10px;
height: 20px;
}