HTML이 작동하지 태그 올바른

Question

내가 거기뿐만 아니라 링크 IMG 예를 들어 버튼은이 이미지가 라인을 추가 한 후, 나는 개미 전에 원하는, 네비게이션 사업부가 있습니다 내가 시도 :

#nav{     
    height: 50px; 
    width: auto; 
    margin: 0 auto; 
    margin-top: 30px; 
    padding: 0;} 

#nav ul li img{ 
    padding: 0; margin: 0;} 

HTML :

<li><img src="./img/dot.gif" alt=""/></li> 

나는 이미지를 선 후 추가 bofore이 코드를 CSS에 추가 :

#nav ul li img:before{ 
    background: url('./img/orange-pixel.gif') repeat-x 50% 50%; 
    width: 40px; 
    height: 3px; 
    float: left; 
    padding-top: 45px;} 
#nav ul li img:after{ 
    background: url('./img/orange-pixel.gif') repeat-x 50% 50%; 
    width: 40px; 
    height: 3px; 
    float: left; 
    padding-top: 45px;} 

을하지만 할 표시 줄을 표시하지 않습니다.

Answer 1

this 게시물에 따르면 대부분의 브라우저는 img 태그의 경우 :before/:after을 계산하지 않습니다. 당신을 도울 수있는 방법 : 이미지에 경계를 추가하여 선을 설정하지 않는 이유는 무엇입니까? 또는 li 태그에 :before/:after을 사용 하시겠습니까?

Answer 2

당신은 당신에

content:"."; 
text-indent:-9999em; 
display:block 

을 추가 할 수 있습니다 & 전에 : 후. 이 모든 것은 "무언가를 붙잡을"수있는 것이고 작동해야합니다.

기본 줄이라면 리의 한면에 테두리를 추가하지 않는 이유는 무엇입니까? : before and : after는 레거시 브라우저에서 작동하지 않으므로 필요한 경우보다 일관된 환경을 제공합니다.

`li` 태그 안에