이 모양을 예쁘게 보이려고하지만 문제가 발생했습니다. 앵커 태그 안에 자막 또는 간단한 설명이 포함 된 span 요소가 있습니다. 불행히도 그것은 앵커와 같은 스타일입니다. 이것은 내가 원하는 방식이 아닙니다. 스팬 자체에 스타일을 적용 해 보았지만 앵커 스타일에 의해 오버라이드 된 것으로 보입니다. 문제는 링크가 넘어 졌을 때 밑줄이 표시되기를 원하지 않는다는 것입니다.앵커 태그 내부 스팬 스타일링
여기 내 HTML입니다.
<ul>
<li><a href="#">A <span class="subTitle">Subtitle</span></a></li>
<li><a href="#">B <span class="subTitle">Subtitle</span></a></li>
<li><a href="#">C <span class="subTitle">Subtitle</span></a></li>
<li><a href="#">D <span class="subTitle">Subtitle</span></a></li>
<li><a href="#">E <span class="subTitle">Subtitle</span></a></li>
</ul>
그리고 내 CSS는
#leftNav ul li { position: relative; }
#leftNav ul li a span.subTitle
{
bottom: 4px;
color: #000000;
display: block;
font-size: 12px;
left: 10px;
position: absolute;
text-decoration: none;
}
나는 어떤 영향을 미칠 것 같지 않는 범위 자체를 스타일링 시도했습니다. 스팬을 앵커 바깥에 놓으면 리에 대해서 상대적으로 작동하지 않습니다. 스팬은 앵커의 호버 이벤트를 차단하고 클릭 할 수 없습니다.
가능한 경우! important를 사용하지 마십시오. 문제는 색상이 아니라 밑줄입니다. 이 경우 텍스트 장식이 스팬으로 롤오버합니다. – Bocochoco
아, 어디에서 왔는지 알 겠어. 그리고 예, 피하는 것은 매우 합리적인 계획입니다. 나는 일반적으로 그것을 테스트하는데 사용한다. (여전히 중요하지 않다면 중요하다. 그래서 중요한 부분을 찾는다.) 밑줄 문제를 살펴 보겠습니다. – Chris
@Bocochoco : 저에게 브라우저 버그처럼 보입니다. 해결 방법으로 내 대답을 업데이트했습니다. – Chris