[css-real] 형광펜으로 표시한 듯 효과주기

형관펜표시

 

html : 

A: 프레시-<span class="highlight-a">민트</span>
B: 프레시-<span class="highlight-b">민트</span>
C: 프레시-<span class="highlight-b thick">민트</span>

A css :

.highlight-a{
    background: linear-gradient(to top, #36fead 40%, transparent 40%);
}

B css :

.highlight-b{
    box-shadow: inset 0 -15px 0 #f3df4d;
}

아래를 좀 더 두껍게 표현하고 싶다면, border-bottom 추가하면 된다.

.thick{
    border-bottom: 4px solid #f3df4d;
}