Generated content - hover test

Generated content - hover test

HTML

<div class="container">
    <span data-title="Number 1">Item 1</span>
    <span data-title="Number 2">Item 2</span>
    <span data-title="Number 3">Item 3</span>
    <span data-title="Number 4">Item 4</span>    
</div>

CSS

.container {
    position: relative;
    text-align: center;
    padding: 20px 0;
    
    max-width: 420px;
    
    /* height: 160px; */
    margin: 0 auto;
}

.container span {
    display: inline-block;
    padding: 2px 6px;
    background-color:#78CCD2;
    color:#FFFFFF;
    border-radius:4px;
    margin:3px;
    cursor:default;
}	

/* Pseudo-elements can even access attributes in their parent elements */
.container span::before {
    position:absolute;
    bottom: 0;
    left: 0;
    width: 100%;

    content: attr(data-title); 
    
    color: #666666;
    font-weight:bold;
    text-align: left;
    opacity: 0;
    /*Animate the transistions */
    -webkit-transition: opacity 0.4s;
    transition: opacity 0.4s;
}

.container span:hover span:before {
    opacity: 1;
}