css 로 content 대체하기

기존의 html 코드를 미디어쿼리를 사용 스마트폰에서만 다르게 적용하려고합니다.

예를들어, PC용 사이트로고이미지랑, 스마트용 로고이미지를 다르게 적용시키려고 하는데

@media all and (max-width:480px){

#logo{visibility:hidden}

#logo:before{

visibility:visible;

content'<img src="logo.png">';

}

}

이런식으로 하니 날코드가 그냥 노출이 됩니다.

이런경우 img 태그가 먹히게 하려면 어떻게 해야할까요?

css 로는 아예 안되는걸까요?