텍스트 장식을 제거하는 방법을 알아낼 수 없습니다.

Question

업데이트 2 : 질문은 MWE 오프라인 예제로는 해결할 수 없기 때문에 더 이상 적합하지 않습니다. (버그를 담당 한 코드 조각도 발견했습니다.

텍스트 장식 테두리처럼 보이는 헤더 요소 위로 마우스를 가져 가면 작은가는 경계선이 생겨서 제거 할 수 없습니다. .

내 지식

가 text-decoration: none;으로 해결할 수없는 수있는이 문제는 ... 그냥 작동하지 않습니다 또는 내가 잘못된 요소에 그것을 적용 ...는 다시, 나는 ... 나는 그들 모두를 테스트했습니다 생각하는 왜 내 질문을 올리는거야?

text-decoration: "none" http://oho.xyz/hover1.jpg

MWE는 정상적으로 작동합니다. (http://codepen.io/pattulus/pen/bNRxaz)하지만 실제는 아닙니다.

문제가 내 코드와 정확히 일치하지 않기 때문에 에서 실행중인 예제가 있습니다. 지난 시간 동안 웹 검사관과 디버깅을했는데 여기에 무엇이 있는지 정확히 지적 할 수 없습니다. 나는 성공없이 거의 모든 곳에서 text-decoration: none !important을 배치했다.

그래서 진짜 질문입니다.이 버그는 무엇이며 어떻게 발견합니까?

업데이트 : 혼동을 피하기 위해 가짜 ::before 요소가 추가 된 가짜 테두리를 제거했습니다. 이 문제가 해결되면 나중에 추가하겠습니다. 또한 이것을 사용하여 html을 더 의미 론적으로 만들었습니다.

Answer 1

는 내가 모든 태그에 밑줄 세계적으로 불리는 혼합했다 :

믹스 인이 스마트 방식으로 작성되어 있지 않기 때문에

@mixin hoverbottom($width: 2px, $style: solid, $color: $orangey-red) { 
    &:hover { 
    @include transition($link-transition); 
    border-bottom: $width $style $color; 
    } 
} 

, 단순히 border-bottom: none 말할 수없는, 그러나 필요 @include hoverbottom (0px, solid, transparent);. 좀 더 원활하게 작동하도록 다시 작성하겠습니다. 그러나 ... 이것은 범인이었다.

시간을내어 주셔서 감사합니다.

Answer 2

나는 귀하의 사이트의 라이브 버전을 체크 아웃하고 컨텐츠를 비활성화하면 :: css before CSS의 CSS 속성이 사라집니다.

Answer 3

href 태그를 두 h1 태그로 감싸는 것은 나쁜 마크 업 방식입니다. 다음과 같이 다시 작성하십시오 :

<h1><a href=#">Some title<span>sub title text</span></a></h1> 

새 html 변경 사항을 반영하여 CSS를 변경하면 동작을 더 잘 제어 할 수 있습니다. 내 예에서