each style in [ 1, 2, 3 ]
    .entities(class="entities-" + style) When <mark data-entity="person">Sebastian Thrun</mark> started working on self-driving cars at <mark data-entity="org">Google</mark> in <mark data-entity="date">2007</mark>, few people outside of the company took him seriously.

$entities: ( person: #f44d61, org: #8e7dff, date: #2fbbab )

.entities-1 [data-entity]
    padding-left: 0.35em
    font-weight: bold
    border: 2px solid
    
    &:after
        padding: 0.25em 0.35em
        margin: 0 0 0 0.35em
        color: #fff
        font-weight: bold
        font-size: 0.95em
    
    @each $entity, $color in $entities
        &[data-entity="#{$entity}"]
            border-color: $color
            color: $color

            &:after
                background: $color

.entities-2 [data-entity]
    font-weight: bold
    border-bottom: 2px dashed
    border-left: 2px dashed
    padding-left: 0.35em
    border-bottom-left-radius: 5px
    
    &:after
        padding: 0.5em 0.5em
        margin-left: 0.75em
        font-size: 0.65em
        text-transform: uppercase
        color: #fff
        position: relative
        bottom: -2px
        vertical-align: middle
        border-top-right-radius: 5px
    
    @each $entity, $color in $entities
        &[data-entity="#{$entity}"]
            border-color: $color
            
            &:after
                background: $color
        
        
.entities-3 [data-entity]
    padding: 0 0.15em 0.15em 0.15em
    position: relative
    cursor: help
    border-bottom: 3px solid
    
    &:hover:after
        opacity: 1
    
    &:after
        opacity: 0
        font-size: 0.65em
        font-weight: bold
        text-transform: uppercase
        position: absolute
        bottom: -1.5em
        left: 0
        transition: opacity 0.25s ease
    
    
    @each $entity, $color in $entities
        &[data-entity="#{$entity}"]
            border-bottom-color: $color
        
            &:after
                color: $color
        
[data-entity]
    line-height: 1
    display: inline-block
    background: transparent

    &:after
        box-sizing: border-box
        content: attr(data-entity)
        line-height: 1
        display: inline-block

.entities
    font: 18px/#{2.5} Arial, sans-serif
    padding: 25px 50px

*
    box-sizing: border-box
    -webkit-font-smoothing: antialiased