Можно ли использовать этот эффект в коде?

Question

Я заметил интересную тенденцию, которую проектируют дизайнеры для создания своего рода подчеркивания, и мне любопытно, может ли это быть достигнуто в коде. Это как подчеркивание, но оно идет за словом.

Answer 1

Это может быть сделано в гораздо более короткий путь:

.underline { 
    font-size: 50px; 
    border-radius: 10px; 
    height: 10px; 
    width: 255px; 
    box-shadow: 0 45px 0 5px #D9EEC3; 
    font-family: sans-serif; 
} 

Демонстрация: http://jsbin.com/vohoroziwa/1/edit?html,css,output

Answer 2

Для лучшей практики, вы должны разделить свой код. Из образа и вопроса вы можете добиться этого таким образом.

* { 
 
    box-sizing: border-box; 
 
} 
 
.heading { 
 
    color: #404C64; 
 
    font-weight: 700; 
 
    position: relative; 
 
    display: inline-block; 
 
    margin: 0; 
 
    padding-left: 10px; 
 
    padding-right: 10px; 
 
    line-height: 0.4; 
 
} 
 
.heading:after { 
 
    display: block; 
 
    width: 100%; 
 
    padding: 10px; 
 
    content: ''; 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    top: 100%; 
 
    background: #D9EEC3; 
 
    border-radius: 10px; 
 
    z-index: -1; 
 
}

<h1 class="heading">Text here</h1>

Answer 3

<h1>Text Here</h1> 

CSS:

h1 { 
    display: inline-block; 
    position: relative; 

    /* Adjust below values accordingly */ 
    padding: 0 15px; 
} 

h1:after { 
    content: ''; 
    display: block; 
    position: absolute; 
    z-index: -1; 
    width: 100%; 
    left: 0; 

    /* Adjust below values accordingly */ 
    height: 20px; 
    margin-top: -15px; 
    background-color: lightgreen; 
    border-radius: 10px; 
} 

JSFiddle