비주얼 스타일의 세부 사항에 들어가는 것은 text-decoration:underline쓸데없는 일이므로, 일종의 핵을 제거 text-decoration:underline하고 마법의 먼 미래 버전의 CSS가 우리에게 더 많은 통제력을 부여 할 때까지 다른 것으로 대체해야합니다. .
이것은 나를 위해 일했다 :
a {
background-image: linear-gradient(
180deg, rgba(0,0,0,0),
rgba(0,0,0,0) 81%,
#222222 81.1%,
#222222 85%,
rgba(0,0,0,0) 85.1%,
rgba(0,0,0,0)
);
text-decoration: none;
}
<a href="#">Lorem ipsum</a> dolor sit amet, <a href="#">consetetur sadipscing</a> elitr, sed diam nonumy eirmod tempor <a href="#">invidunt ut labore.</a>
- 줄이 텍스트에서 얼마나 떨어져 있는지 변경하려면 % 값 (81 % 및 85 %)을 조정하십시오.
- 두 % 값의 차이를 조정하여 선 두께를 변경하십시오.
- 밑줄 색상을 변경하려면 색상 값을 조정하고 (# 222222)
- 여러 줄 인라인 요소와 함께 작동
- 어떤 배경에서도 작동
이전 버전과의 호환성을 위해 모든 독점 속성이 포함 된 버전은 다음과 같습니다.
a {
/* This code generated from: http://colorzilla.com/gradient-editor/ */
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 81%, rgba(0,0,0,1) 81.1%, rgba(0,0,0,1) 85%, rgba(0,0,0,0) 85.1%, rgba(0,0,0,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(81%,rgba(0,0,0,0)), color-stop(81.1%,rgba(0,0,0,1)), color-stop(85%,rgba(0,0,0,1)), color-stop(85.1%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 81%,rgba(0,0,0,1) 81.1%,rgba(0,0,0,1) 85%,rgba(0,0,0,0) 85.1%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 81%,rgba(0,0,0,1) 81.1%,rgba(0,0,0,1) 85%,rgba(0,0,0,0) 85.1%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 81%,rgba(0,0,0,1) 81.1%,rgba(0,0,0,1) 85%,rgba(0,0,0,0) 85.1%,rgba(0,0,0,0) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 81%,rgba(0,0,0,1) 81.1%,rgba(0,0,0,1) 85%,rgba(0,0,0,0) 85.1%,rgba(0,0,0,0) 100%); /* W3C */
text-decoration: none;
}
업데이트 : SASSY 버전
나는 이것을 위해 scss mixin을 만들었다. SASS를 사용하지 않으면 위의 일반 버전이 여전히 훌륭하게 작동합니다 ...
@mixin fake-underline($color: #666, $top: 84%, $bottom: 90%) {
background-image: linear-gradient(
180deg, rgba(0,0,0,0),
rgba(0,0,0,0) $top,
$color $top + 0.1%,
$color $bottom,
rgba(0,0,0,0) $bottom + 0.1%,
rgba(0,0,0,0)
);
text-decoration: none;
}
다음과 같이 사용하십시오.
$blue = #0054a6;
a {
color: $blue;
@include fake-underline(lighten($blue,20%));
}
a.thick {
color: $blue;
@include fake-underline(lighten($blue,40%), 86%, 99%);
}
업데이트 2 : Descenders 팁
배경색이 단색이면 얇 text-stroke거나text-shadow 과 같은 색 같은 색을 하여 내림차순으로 보이도록하십시오.
신용
이것은 원래 https://eager.io/app/smartunderline 에서 찾은 기술의 단순화 된 버전 이지만 기사가 게시되지 않았습니다.