CSS 요소 뒤에 mailto 링크를 삽입 하시겠습니까?

Question

mailto 링크를 표시하려고합니다. CSS로 가능합니까?

HTML 의사 요소 추가

.footer_column .fe:after {content:"<a href="mailto:info@site.com">info@site.com</a>"; } 

Answer 1

내용은 DOM에 나타나지 않습니다

<li class="fe footer_no_link"></li> 

CSS, 그래서 당신은 할 수 없습니다 않습니다. 하지만 CSS로 왜 그걸하고 싶습니까? 그것은 스타일이 아니며 올바른 위치는 HTML 파일에 직접있는 것처럼 보입니다.

목표는 스팸 메일을 차단하는 경우, 나는 보통 자바 스크립트의이 조각 사용

var m; 
m='in'; 
m+='f'; 
m+='o@exa'; 
m+='mpl'; 
m+='e.co'; 
m+='m'; 
$ele = document.getElementById('contact-mail'); 
$ele.href = 'mailto:'+m; 
$ele.innerHTML = m; 

메일은이 모든 파일에서 이메일로 표시되지 않는 것을 확인하기 위해 갈라진다을. ,

.fe:after {content:"<a href='mailto:info@site.com'>info@site.com</a>"; }​ 

http://jsfiddle.net/Cb2ry/

을 그럼에도 불구하고 : 음성 마크 탈출, 또는 변경이 필요하기 때문에 귀하의 값이 표시되지 않은 http://jsfiddle.net/tzkDt/

Answer 2

:

당신은 여기에 결과를 볼 수 있습니다 귀하의 콘텐츠는 렌더링되기보다는 정적 텍스트로 표시됩니다.

Answer 3

CSS에 content에 html을 추가 할 수 없습니다. 네가 모든 것을 벗어나지 않는 한.

http://jsfiddle.net/PDTng/

또는, jQuery를 사용할 수 있고) (.html 인, 예를 들면 :

http://jsfiddle.net/PDTng/1/

Answer 4

이 사람에게 유용 할 수 있습니다 ...

대신의 삽입 CSS와 링크, href & 클래스와 함께 html로 코딩되었지만 비워 두었습니다. 이와 같이 :

<p>This text is always here.</p> 
<a class="mobile" href="mailto:info@site.com"></a> 

.mobile:after { 
    content:'Click here to email us.' 
} 

그런 식으로 내용이있을 때까지 링크가 나타나지 않습니다 (높이 : 0, 너비 : 0).

지도가 작은 화면 크기에서 위치 목록 맨 위에 스택 된 반응 점포 로케이터에 사용하여 목록 앵커에 대한 링크가 필요했습니다. 나는 그것을 "디자인"하는 결정으로 간주했는데, 이것이 단지 정당한 이유입니다.

Answer 5

CSS3 ::after 또는 ::before 선택자로 html 요소를 추가 할 수 없습니다. content:"" 속성은 일반 텍스트 만 허용합니다.

CSS는 스타일링 용도로만 사용해야한다는 것을 기억해야합니다. 여기에는 ::before 및 ::after 셀렉터가 포함됩니다.

가장 좋은 방법은 JavaScript 대안을 사용하는 것입니다.