[CSS] 밑줄 표시 효과 Underline hover effect

See the Pen PooerOj by CreativeStudio (@creativestudiocss) on CodePen.

    background-image: linear-gradient(transparent calc(100% - 3px), #000 3px)   
    background-repeat: no-repeat
    background-size: 0% 100%
    transition: background-size 0.8s
    color: #000
    
    &.yellow
        background-image: linear-gradient(transparent 60%, #F8CD07 40%)
    &:hover
        background-size: 100% 100%

위와 같은 방식 또는 코드펜 방식으로 매우 쉽게 적용할 수 있는 밑줄 CSS 호버 이펙트, 호버 이펙트 뿐만 아니라 강조해야할 텍스트에 적용하기 좋고 쉬운 CSS 라고 할 수 있겠다.

/* 일반 밑줄에 적용할 때

.entry-content u //
    text-decoration: none;
    background-repeat: no-repeat;
    background-size: 0% 100%;
    transition: background-size 0.8s;
//
 */

/* 일반 밑줄에 적용할 때

.entry-content u:hover {
    background-size: 100% 100%;
    background-image: linear-gradient(transparent 60%, #F8CD07 40%);
}
//
 */