text-underline 색상,위치 변경하는 몇가지 방법

text-underline 색상이나 위치가

기본 underline보다 아래에 위치해 있는 디자인이 나올때가 있다

 

기본 underline

span {
    text-decoration: underline;
}

 

 

 

text-underline-position: under; 를 이용하면 기본 언더라인 위치보다 조금 아래에 위치할수 있다

span {
    text-decoration: underline;
    text-underline-position: under;
}

결과 :

 

 

위 방법은 세세한 위치조정은 어렵다

더 정밀한 위치조정과 색상변경을 위해선 아래 2가지 방법이 있다

 

1. ::after

position 으로 띄워서 위치변경

height로 두께변경

background로 색상 변경

span {
    position: relative;
}
span:after {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    position: absolute;
    bottom: 2px;
    left: 1px;
    background: pink;
}

결과 :

 

 

2. box-shadow

box-shadow 로 색상, 두께변경

line-height로 위치 변경

span {
    box-shadow: inset 0 -1px 0 red;
    line-height: 21px;
}

결과 :