<div class="entities">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.<br><br>“I can tell you very senior CEOs of major American car companies would shake my hand and turn away because I wasn’t worth talking to,” said <mark data-entity="person">Thrun</mark>, now the co-founder and CEO of online higher education startup <mark data-entity="org">Udacity</mark>, in an interview with <mark data-entity="person">Recode</mark> <mark data-entity="date">earlier this week</mark>.</div>

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

[data-entity]
    line-height: 1
    display: inline-block
    background: transparent
    padding: 0 0.15em 0.15em 0.15em
    position: relative
    cursor: help
    border-bottom: 3px solid
    
    &:after
        box-sizing: border-box
        content: attr(data-entity)
        line-height: 1
        display: inline-block
        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="#{$entity}"] ~ [data-entity="#{$entity}"]
            &:after
                opacity: 0

            &:hover:after
                opacity: 1

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

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