javascript - CSS Additional Pseudo Elements to One Class (before, after, +more) -
i'm trying achieve below result using "labels" class (eg. don't want "arrow" class/html). possible pseudo elements only? ".labels:tesing{}" etc.
.labels{ position: relative; display: inline-block; vertical-align: top; font-size: 16px; font-weight: bold; font-family: tahoma; padding: 5px; color: #fff; border-radius: 5px; background-color: red; } .labels:before{ display: inline-block; vertical-align: top; font-size: 12px; content: '$'; } .labels:after{ display: inline-block; vertical-align: top; margin-left: 1px; font-size: 12px; content: 'usd'; } .arrow{ position: absolute; bottom: -10px; left: 20px; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid blue; }
html:
<div class="labels">199 <div class="arrow"></div> </div>
js fiddle: http://jsfiddle.net/edcxsw1/w9z7vvxw/
this not possible css only, pretty simple jquery. way:
$('.labels').append('<div class="arrow"></div>');
Comments
Post a Comment