html, body{
    padding: 0;
    margin: 0;
}

*{
    cursor: pointer;
    position: relative;
}


.container {
    width: 900px;
    margin: 0 auto;
  }

.title{
    padding-left: 20px;
    z-index: 10;
}

.author:hover::before{
    content: attr(title);
    position: absolute;
    top: 0;
    left: 0;
    background-color: yellow;
    text-indent: 0;
    font-size: 12px;
    opacity: .4;
    padding: 1px 8px;  
    pointer-events: none;
}
.author:hover::after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 1px solid yellow;
    pointer-events: none;
}

.word{
    text-indent: 30px;
    padding: 5px 10px;
}

.word .comment{
    display: none;
    position: relative;
}
.word:hover .comment{
    display: block;
    position: absolute;
    left: 100%;
    top: 0;
    font-size: 14px;
    padding: 6px;
    box-sizing: border-box;
    text-indent: 0;
    background-color: rgb(177, 177, 177);
    max-width: 180px;
    width: 100%;
    max-height: 100%;
    overflow-y: auto;
}