programing

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

newsource 2023. 8. 28. 21:02

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

CSS 사용, 텍스트가 다음과 같은 경우text-decoration:underline적용됩니다. 텍스트와 밑줄 사이의 거리를 늘리는 것이 가능합니까?

아니요, 하지만 당신은 그런 것으로 갈 수 있습니다.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>데모

2021년 업데이트: text-underline-offset이제 거의 모든 주요 버전과 최신 버전의 브라우저에서 작동합니다(IE11은 사용할 수 없습니다). https://caniuse.com/ ?search=text-module-module

2019년 업데이트:CSS Working Group은 밑줄의 정확한 배치를 제어할 수 있도록 새 속성(및 )을 추가하는 텍스트 장식 레벨 4에 대한 초안을 게시했습니다.이 글을 쓰는 시점에서, 이것은 초기 단계 초안이고 어떤 브라우저에서도 구현되지 않았지만, 결국 아래의 기술을 쓸모없게 만들 것으로 보입니다.

아래의 원답.

사용 시의 문제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/

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

사용하다

{
   text-decoration: underline;
   text-underline-offset: 2px;
}

Here, text-underline-offset: 2px;  is used to define the distance of the underline from the text, where "2px" is the distance.

Note: text-underline-offset: 2px;  can only be used after 
                  text-decoration: underline;

You can also change the thickness of underline by writing
                   text-decoration: underline 5px;
where "5px" is the thickness.

자세한 내용은 다음 링크를 참조하십시오. https://developer.mozilla.org/en-US/docs/Web/CSS/text-underline-offset

여기에 저에게 잘 맞는 것이 있습니다.

<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;
}

업데이트: SASY 버전

나는 이것을 위해 sss 믹스를 만들었습니다.SAS를 사용하지 않더라도 위의 일반 버전은 여전히 잘 작동합니다.

@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: 내림차순 팁

배경색이 단색인 경우 얇은 색을 추가합니다.text-stroke또는text-shadow당신의 배경과 같은 색으로 하산자들을 멋지게 보이게 합니다.

신용 거래

이것은 제가 원래 https://eager.io/app/smartunderline, 에서 찾은 기술의 단순화된 버전이지만 그 이후로 기사는 삭제되었습니다.

이에 대한 매우 쉬운 대답이 있습니다.

text-decoration: underline;
text-underline-offset: 3px;

text-underline-offsetCSS 자체 방법입니다.에 대한 자세한 내용은 다음과 같습니다.

오래된 질문인 것은 알지만 한 줄 텍스트 설정의 경우display: inline-block그런 다음 설정합니다.height경계선과 텍스트 사이의 거리를 제어하는 데 효과가 있었습니다.

@마지막 아이의 대답은 훌륭한 대답입니다!

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

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

  1. content로 (, 같은 길이로, 같은 길이로).

  2. 텍스트) 글꼴 색을 다음으로 설정합니다.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;
}

내 바이올린을 보세요.

테두리 너비 속성과 패딩 속성을 사용해야 합니다.좀 더 멋있어 보이기 위해 애니메이션을 추가했습니다.

body{
  background-color:lightgreen;
}
a{
  text-decoration:none;
  color:green;
  border-style:solid;
  border-width: 0px 0px 1px 0px;
  transition: all .2s ease-in;
}

a:hover{
  color:darkblue;
  border-style:solid;
  border-width: 0px 0px 1px 0px;
  padding:2px;
}
<a href='#' >Somewhere ... over the rainbow (lalala)</a> , blue birds, fly... (tweet tweet!), and I wonder (hmm) about what a <i><a href="#">what a wonder-ful world!</a> World!</i>

원하는 경우:

  • 다행의
  • 점선의
  • 맞춤 하의 패딩과 함께
  • 포장을 벗은

밑줄, 당신은 1 픽셀 높이 배경 이미지를 사용할 수 있습니다.repeat-x그리고.100% 100%위치:

display: inline;
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAABCAYAAAD0In+KAAAAEUlEQVQIW2M0Lvz//2w/IyMAFJoEAis2CPEAAAAASUVORK5CYII=') repeat-x 100% 100%;

▁the다▁second▁replace를 대체할 수 있습니다.100%다른 것에 의하여.px또는em밑줄의 수직 위치를 조정합니다.또한 사용할 수 있습니다.calc수직 패딩을 추가하려면 다음과 같이 하십시오.

padding-bottom: 5px;
background-position-y: calc(100% - 5px);

물론 다른 색상, 높이 및 디자인을 사용하여 기본 64png 패턴을 만들 수도 있습니다. 예를 들어, http://www.patternify.com/ - 정사각형 너비와 높이를 2x1로 설정하십시오.

영감의 출처: http://alistapart.com/article/customunderlines

사중인경우를 .text-decoration: underline;은 런그다음밑텍사스공이수추있백다습니가할을에트줄과▁using▁between▁by▁and다▁then있▁space▁add를 사용하여 밑줄과 텍스트 에 공백을 추가할 수 있습니다.text-underline-position: under;

자세한 내용은 텍스트 언더라인 위치 속성을 여기에서 확인할 수 있습니다.

다음을 사용합니다.

html:

<h6><span class="horizontal-line">GET IN</span> TOUCH</h6>

CSS:

.horizontal-line { border-bottom: 2px solid  #FF0000; padding-bottom: 5px; }

여러 줄 텍스트 또는 링크를 대신하여 텍스트를 블록 요소 내의 스팬으로 감쌀 수 있습니다.

<a href="#">
    <span>insert multiline texts here</span>
</a>

그런 다음 테두리 하단과 패딩을 추가할 수 있습니다.<span>.

a {
  width: 300px;
  display: block;
}

span {
  padding-bottom: 10px;
  border-bottom: 1px solid #0099d3;
  line-height: 48px;
}

당신은 이 바이올린을 참조할 수 있습니다.https://jsfiddle.net/Aishaterr/vrpb2ey7/2/

U(언더라인 태그)를 사용하여 할 수 있었습니다.

u {
    text-decoration: none;
    position: relative;
}
u:after {
    content: '';
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 1px;
    border-width: 0 0 1px;
    border-style: solid;
}


<a href="" style="text-decoration:none">
    <div style="text-align: right; color: Red;">
        <u> Shop Now</u>
    </div>
</a>

사용하는 항목:

<span style="border-bottom: 1px solid black"> Enter text here </span>

여기에는 몇 가지 훌륭한 해결책이 있지만 각각 몇 가지 문제가 있습니다.텍스트 밑줄 간격띄우기는 브라우저마다 다릅니다.네모난 사탕에 의한 대답도 효과가 있지만, 조금 복잡합니다.테두리 맨 아래를 사용하면 텍스트의 레이아웃이 변경되고 내용이 이동합니다.

사용자 정의 밑줄을 추가하는 한 가지 방법은 밑줄을 텍스트 크기와 관련된 크기의 배경 이미지로 만드는 것입니다.

    a {
        /* Change the source image to account for changes to the text colour. It should be a single column. */
        background-image: url(data:image/png;base64,iVBORw__EDITED_OUT___0KGgYII=);
        /*background-image: url('underlineImage.png');*/
        background-size: 1px 1.1em;
        background-repeat: repeat-x;
        display: inline;
        cursor: pointer;
        text-decoration: none;
    }

텍스트가 증가하면 텍스트 크기에 상대적인 위치가 유지됩니다.이 기능을 사용하면 "별줄"이나 선과 같이 원하는 밑줄 이미지를 사용할 수 있습니다.

위의 예제에는 효과를 생성하기 위한 전체 base64 정보가 포함되어 있지 않습니다.이것은 기본적인 기능이고 이전 브라우저와 상당히 호환되기 때문에 모든 브라우저에서 잘 작동합니다.

<a href="#">This _____ is the link</a>

배경 이미지가 투명도와 함께 png이면 다른 요소 위에서도 잘 작동합니다.

다음을 사용하여 이 작업을 수행할 수 있습니다.

text-underline-position: under;

text-underline-offset: {value(px)};

이 속성은 사용자가 제공한 오프셋 값으로 링크 아래에 있는 밑줄을 이동합니다.

더 많은 참조를 위해, text-flash-offest | developer.mozilla.org 를 방문하세요.

언급URL : https://stackoverflow.com/questions/1734618/how-to-increase-the-gap-between-text-and-underlining-in-css

'programing' 카테고리의 다른 글

jQuery를 사용하여 클릭 이벤트 핸들러를 모두 제거하는 방법은 무엇입니까?  (0) 2023.08.28
MySQL DDL을 Oracle DDL로 자동 변환하려면 어떻게 해야 합니까?  (0) 2023.08.28
Jquery: Enter 키를 누를 때 클릭 이벤트를 트리거하는 방법  (0) 2023.08.28
MySQL 워크벤치에서 구문 오류를 무시하는 방법은 무엇입니까?  (0) 2023.08.28
SQLSTATE[HY000] [2002] php_network_getadaddrinfo: getaddrinfo 실패: 이름 또는 servname이 제공되지 않았거나 알 수 없습니다.  (0) 2023.08.28

'programing'의 다른글

  • 현재글CSS에서 텍스트와 밑줄 사이의 간격을 늘리는 방법

관련글

댓글

티스토리툴바