링크에서 완고한 밑줄 제거

542

밑줄없이 링크를 흰색으로 표시하려고합니다. 텍스트 색상이 흰색으로 올바르게 표시되지만 파란색 밑줄이 완고하게 유지됩니다. 나는 노력 text-decoration: none;과 text-decoration: none !important;는 CSS에 링크 밑줄을 제거 할 수 있습니다. 둘 다 일하지 않았다.

.boxhead .otherPage {
  color: #FFFFFF;
  text-decoration: none;
}
<div class="boxhead">
  <h2>
    <span class="thisPage">Current Page</span>
    <a href="myLink"><span class="otherPage">Different Page</span></a>
  </h2>
</div>
스 니펫 확장

링크에서 파란색 밑줄을 어떻게 제거합니까?

css  hyperlink  underline 
— dmr
소스
1
텍스트 장식을 할 때 사라져야합니다. 이것을 올바른 요소에 적용하고 있습니까? 예제 코드를 제공 할 수 있습니까?
— Davor Lucic
텍스트 장식은 어디에 있습니까?
— shuttle87

답변:

771

예상대로 text-decoration: none;앵커 ( .boxhead a) 에는 적용되지 않고 범위 요소 ( .boxhead) 에는 적용 하고 있습니다.

이 시도:

.boxhead a {
    color: #FFFFFF;
    text-decoration: none;
}
— 다보르 루시 크
소스
12
하지만 당신은 텍스트 무엇을 경우 주변 뿐만 아니라 범위를, 그리고 당신은 주변 텍스트 링크 밑줄을 갖고 싶어하지만, 범위 내의 텍스트가 아무도 없어하는?
— JMTyler
4
@rebus, 당신은 할 수 없어? 왜 안돼? 적어도 IE7 이상 및 FireFox 4 이상에서는 가능하지만 어떤 이유로 든 Chrome에서는 불가능합니다. 테스트 한 비 Chrome 브라우저에서 작동 .toc-list a > span{text-decoration:none !important;} 해야하는 코드는 다음과 같습니다. @JMTyler의 질문이 합법적이라고 생각합니다. 동일한 솔루션을 찾고 있습니다.
— Tony Topper
7
text-decoration위의 힌트와 같이 중첩 태그에서 재정의를 지원하지 않는 것 같습니다 . 당신이 한 번 a { text-decoration: underline; }규칙은 적용 할 수 와 함께 예를 드-적용 a .wish_this_were_not_underlined { text-decoration: none; }. 이에 대한 참조를 찾을 수 없지만 (Chrome에서) 내 경험입니다.
— 부분적으로 흐린
2
위의 다른 사람들과 마찬가지로 적용하여 텍스트에 밑줄을 그을 수 없었 text-decoration: none;으므로 대신을 사용하여 줄을 숨기도록 선택했습니다 text-decoration: underline; text-decoration-color: white;. / hack
— Ryan Burbidge
1
전체 앵커가 아닌 앵커 내부의 요소에서 밑줄 만 제거하려고하는 경우. 내부 요소를 다음과 같이 인라인 블록으로 만들어야합니다. .boxhead .otherPage { display: inline-block; color: #FFFFFF; text-decoration: none; }
— Patrick Denny
213

앵커 태그 (링크)에는 방문, 호버, 링크 및 활성과 같은 의사 클래스도 있습니다. 스타일이 해당 주에 적용되고 다른 스타일과 충돌하지 않는지 확인하십시오.

예를 들면 다음과 같습니다.

a:hover, a:visited, a:link, a:active
{
    text-decoration: none;
}

사용자 액션 의사 클래스 : hover, : active 및 : focus 에 대한 자세한 내용 은 W3.org 를 참조하십시오 .

— 젤턴
소스
5
a:link당신이 말할 때 당신 이 의미하는 것 같아요a:click
— artlung
6
내 버튼 링크를 클릭 한 후에도 동일한 문제가 발생했기 때문에 실제로 허용되는 답변이어야합니다. 페이지로 돌아 왔을 때 방문한 부동산이 여전히 자주색으로 바뀌 었습니다.
— Doresoom
33

text-decoration: none !important그것을 제거해야합니다 .. 당신은 border-bottom: 1px solid에 대해 숨겨져 있지 않은가? (IE의 Firebug / F12에서 계산 된 스타일 추적)

— 알렉스 케이
소스
4
설정 border-bottom-style: none;이 나를 위해 고정되었습니다.
— Helder S Ribeiro
27

이 속성을 앵커 태그에 추가하십시오.

style="text-decoration:none;"

예:

<a href="page.html"  style="text-decoration:none;"></a>

또는 CSS 방식을 사용하십시오. 

.classname a {
    color: #FFFFFF;
    text-decoration: none;
}
— 나가라 잔 SR
소스
16

때때로 당신이보고있는 것은 텍스트 밑줄이 아닌 상자 그림자입니다.

이것을 시도하십시오 (당신에게 적합한 CSS 선택기를 사용하십시오) :

a:hover, a:visited, a:link, a:active {

    text-decoration: none!important;

    -webkit-box-shadow: none!important;
    box-shadow: none!important;
}
— jeffmjack
소스
1
이것이 답이되어야합니다. 때로는 상자 그림자에 밑줄이 생깁니다.
— Bhargav
정답은 아니지만 최고입니다. 그 범위는 전 세계적이며 구체적이지 않습니다. 이와 같은 것이 트릭을 수행해야합니다. .otherPage a:link {text-decoration:none;}; 필요한 경우 방문, 활성 및 호버링을 위해 반복하십시오.
— Ajowi
14

당신이 놓친 text-decoration:none에 대한 앵커 태그 . 따라서 코드는 다음과 같아야합니다.

.boxhead a {
    text-decoration: none;
}
<div class="boxhead">
    <h2>
        <span class="thisPage">Current Page</span>
        <a href="myLink"><span class="otherPage">Different Page</span></a>
    </h2>
</div>
스 니펫 확장

텍스트 장식을위한 더 많은 표준 속성

여기에 이미지 설명을 입력하십시오

— 산토스 칼세
소스
9

페이지를 보지 않고 추측하기 어렵다.

그러나 당신 border-bottom: 1px solid blue;이 적용되고 있는 것처럼 들립니다 . 아마도 추가하십시오 border: none;. text-decoration: none !important그래도 CSS를 재정의하는 다른 스타일이있을 수 있습니다.

Firefox 웹 개발자 툴바를 사용하는 것이 멋진 곳입니다. CSS를 편집하고 적어도 Firefox에서 작동하는지 확인할 수 있습니다. 아래에 CSS > Edit CSS있습니다.

— Artlung
소스
9

원칙적으로, "밑줄"이 텍스트와 같은 색이 아니고 [ '색상 :'이 인라인으로 재정의되지 않은 경우] "텍스트 장식 :"에서 나오는 것이 아닙니다. "테두리-바닥 :"이어야합니다.

의사 클래스에서 국경을 벗어나는 것도 잊지 마십시오!

a, a:link, a:visited, a:active, a:hover {border:0!important;}

이 스 니펫은 앵커에있는 것으로 가정하고 그에 따라 래퍼로 변경합니다. 근본 원인을 추적 한 후 "! 중요"대신 특수성을 사용하십시오.

— 조엘 크로포드 스미스
소스
4

다른 답변은 정확하지만 모든 성가신 링크에서 밑줄을 쉽게 제거 할 수있는 방법이 있습니다.

a {
   text-decoration:none;
}

그러면 페이지의 모든 단일 링크에서 밑줄이 제거됩니다!

— 야 르츠 테크
소스
다른 링크에서 밑줄을 원할 수 있으므로 앵커 태그와 인라인이 더 나은지 확인하십시오.
— Asuquo12
2

경우 text-decoration: none또는 border: 0하지 작업을 수행, 당신의 HTML에 인라인 스타일을 적용하려고합니다.

— 데크
소스
1

그냥 속성을 사용하십시오

border:0;

그리고 당신은 덮여있다. 텍스트 장식 속성이 전혀 작동하지 않을 때 완벽하게 작동했습니다.

— MK 샌드 후
소스
1

어떤 대답도 나를 위해 일하지 않았습니다. 내 경우에는 표준이 있었다

a:-webkit-any-link {
text-decoration: underline;

내 코드에서. 기본적으로 링크가 무엇이든 텍스트 색상은 파란색이되고 링크는 그대로 유지됩니다.

그래서 헤더 끝에 코드를 다음과 같이 추가했습니다. 

<head>
  </style>
    a:-webkit-any-link {
      text-decoration: none;
    }
  </style>
</head>

문제는 더 이상 없습니다.

— 네오
소스
0

다음은 asp.net webforms LinkButton 컨트롤의 예입니다.

 <asp:LinkButton ID="lbmmr1" runat="server" ForeColor="Blue" />

코드 뒤 :

 lbmmr1.Attributes.Add("style", "text-decoration: none;")
— JoshYates1980
소스
0

잘못된 선택기에서 text-decoration none을 사용했습니다. 장식에 필요한 태그를 확인해야합니다.

이 코드를 사용할 수 있습니다

.boxhead h2 a{text-decoration: none;}

또는

.boxhead a{text-decoration: none !important;}

또는

a{text-decoration: none !important;}
— Md Abul Bashar
소스
0

<BODY>태그 앞에 다음 HTML 코드를 넣으십시오 .

<STYLE>A {text-decoration: none;} </STYLE>

— qarly_blue
소스
0

제 경우에는 HTML을 잘못 구성했습니다. 링크는 <u>태그 가 아니라 태그 내에있었습니다 <ul>.

— 엠빌 콕스
소스
0

다른 사람들이 지적했듯이 중첩 된 텍스트 장식 스타일을 재정의 할 수없는 것처럼 보입니다 ...하지만 텍스트 장식 색상을 변경할 수 있습니다.

해킹으로 색상을 투명하게 변경했습니다.

텍스트 장식 색상 : 투명;
— 벤
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.