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>'); 

fiddle: https://jsfiddle.net/lmgonzalves/w9z7vvxw/3/


Comments

Popular posts from this blog

python - TypeError: start must be a integer -

c# - DevExpress RepositoryItemComboBox BackColor property ignored -

django - Creating multiple model instances in DRF3 -