a :: before 선택기를 <textarea>과 함께 사용할 수 있습니까?

Question

<textarea>에 몇 가지 스타일을 실험 중이며 ::before 및 ::after 선택기로 일부 작업을 시도했지만 작동하도록 할 수 없었습니다. 그래서 질문은 : 가능합니까? 나는 CSS를 둘러싼 형태가 언급 할 수없는 비논리적 인 것을 알고 있지만 이것이 효과가있는 것처럼 보입니다.

Answer 1

:before 및 의사 요소의 생성 된 내용이 내 요소 만 이전을 배치됩니다 때문에 :after는 text-area (나 같은 img 또는 input 같은 다른 요소를 포함 할 수없는 요소)에서 작동하지 않습니다 또는 다음에 해당 요소의 내용이며 요소로 작동합니다. 의사 요소는 부모 요소 앞이나 뒤에 배치되지 않습니다 (인터넷에서 찾을 수있는 일부 정보와는 반대). 설명하기 :

를이 CSS가있는 경우 :

p:before {content: 'before--'} 
p:after {content: '--after'} 

그리고 HTML과 같은 : 소스 코드 것처럼

<p>Original Content</p> 

효과적으로 화면 에 렌더링 :

<p>before--Original Content--after</p> 

되지 않음소스 코드는 것처럼 :이다

before--<p>Original Content</p>--after 

왜 의사 요소를 인식하지 않는 (위에서 언급 한 것과 같은) 어떤 HTML 요소 "내용"을 포함 할 수 없습니다 태그로 해당 콘텐츠가 생성 될 "장소"가 없습니다. textarea에는 "콘텐츠"가 포함될 수 있지만 순수 텍스트 콘텐츠 만 포함될 수 있습니다.

Answer 2

사실 입력 요소에 :after의 콘텐츠를 추가 할 수 있습니다. 요소가 활성 상태에있을 때 팁이 추가됩니다.

#gallery_name { 
    position:relative; 
} 
#gallery_name:focus:after { 
    content: "Max Characters: 30"; 
    color: #FFF; 
    position: absolute; 
    right: -150px; 
    top:0px; 
} 

<input id="gallery_name" type="text" name="gallery_name" placeholder="Gallery Name">