[css] CSS에서 텍스트와 밑줄 사이의 간격을 늘리는 방법

텍스트를 text-decoration:underline적용 했을 때 CSS를 사용 하면 텍스트와 밑줄 사이의 거리를 늘릴 수 있습니까?

답변

아니,하지만 당신은 같은 것을 함께 갈 수 border-bottom: 1px solid #000와 padding-bottom: 3px.

동일한 색상의 “밑줄”(이 예제에서는 테두리)을 원할 경우 색상 선언을 생략하면됩니다 (예 : border-bottom-width: 1px및) border-bottom-style: solid.

여러 줄의 경우 여러 줄의 텍스트를 요소 내부의 범위로 줄 바꿈 할 수 있습니다. 예는 <a href="#"><span>insert multiline texts here</span></a>다음 단지 추가 border-bottom및 padding온 <span>– 데모

답변

2019 업데이트 : CSS 실무 그룹은 새로운 속성을 추가 할 뿐만 아니라 텍스트 장식 레벨 4 초안을 게시 text-underline-offset했습니다.text-decoration-thickness 하여 밑줄의 정확한 배치를 제어 할 수 있도록 )을 . 이 글을 쓰는 시점에서 초안 초안이며 어떤 브라우저에서도 구현되지 않았지만 결국 아래 기술을 쓸모없는 것으로 보입니다.

아래의 원래 답변.

border-bottom직접 사용의 문제점 은로도 padding-bottom: 0밑줄이 텍스트에서 너무 멀리 떨어져 있어보기에 좋지 않다는 것입니다. 따라서 우리는 여전히 완전한 통제권을 가지고 있지 않습니다.

픽셀 정확도를 제공하는 솔루션 중 하나는 :after의사 요소 를 사용하는 것입니다 .

a {
    text-decoration: none;
    position: relative;
}
a:after {
    content: '';

    width: 100%;
    position: absolute;
    left: 0;
    bottom: 1px;

    border-width: 0 0 1px;
    border-style: solid;
}

bottom속성 을 변경하면 (음수가 좋습니다) 밑줄을 원하는 위치에 정확하게 배치 할 수 있습니다.

이 기술의 한 가지 문제점은 줄 바꿈에서 약간 이상하게 작동한다는 것입니다.

답변

이것을 사용할 수 있습니다 text-underline-position: under

자세한 내용은 여기를 참조하십시오 : https://css-tricks.com/almanac/properties/t/text-underline-position/

브라우저 호환성 도 참조하십시오 .

답변

여기 나를 위해 잘 작동하는 것이 있습니다.

<style type="text/css">
  #underline-gap {
    text-decoration: underline;
    text-underline-position: under;
  }
</style>
<body>
  <h1 id="underline-gap"><a href="https://Google.com">Google</a></h1>
</body>

스 니펫 확장

답변

비주얼 스타일의 세부 사항에 들어가는 것은 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 에서 찾은 기술의 단순화 된 버전 이지만 기사가 게시되지 않았습니다.

답변

나는 그것이 오래된 질문이라는 것을 알고 있지만 한 줄 텍스트 설정 display: inline-block과 설정은 height테두리와 텍스트 사이의 거리를 제어하는 데 효과적이었습니다.

답변

@ last-child ‘s answer은 훌륭한 답변입니다!

그러나 H2에 테두리를 추가하면 텍스트보다 밑줄이 길어집니다.

CSS를 동적으로 작성하거나 운이 좋으면 텍스트가 무엇인지 알면 다음을 수행 할 수 있습니다.

를 content올바른 길이로 변경하십시오 (즉, 동일한
텍스트) 글꼴 색을 transparent(또는 rgba(0,0,0,0))

밑줄을 표시하려면 <h2>Processing</h2>(예를 들어) 마지막 자녀의 코드를 다음과 같이 변경하십시오.

a {
    text-decoration: none;
    position: relative;
}
a:after {
    content: 'Processing';
    color: transparent;

    width: 100%;
    position: absolute;
    left: 0;
    bottom: 1px;

    border-width: 0 0 1px;
    border-style: solid;
}