[css] CSS - 네임펜 (= 형광펜) 효과

네임펜 효과.

 

<style>

.namepen {

    width: fit-content;

    padding: 0 0.25%;

    position: relative;

    z-index: 1;

}

.namepen::after {

    position: absolute;

    display: block;

    content: '\00a0';

    width: 100%;

    left: 0;

    right: 0;

    top: 50%;

    height: 60%;

    background-color: #ffe360;

    transform: skew(-5deg);

    z-index: -1;

}

</style>

 

<div>

    <span class="namepen">홈짱닷컴 Homzzang.com</span> 

</div>

결과보기

몰라무서워 님 (201216) https://sir.kr/g5_tip/14958