Can a ::before selector be used with a ?</a></h1> </div> <div class="grid fw-wrap pb8 mb16 bb bc-black-075"> <div class="grid--cell ws-nowrap mr16 mb8" title="2016-01-12 19:07:53Z"> <span class="fc-light mr2">Asked</span> <time itemprop="dateCreated" datetime="2010-07-20T04:16:02.160" class="fromnow">Jul 20 '10 at 04:16</time> </div> <div class="grid--cell ws-nowrap mr16 mb8"> <span class="fc-light mr2">Active</span> <time class="fromnow" title="2023-06-15T17:02:33.670" datetime="2023-06-15T17:02:33.670">Jun 15 '23 at 17:02</a> </div> <div class="grid--cell ws-nowrap mb8" title="Viewed 28,282 times"> <span class="fc-light mr2">Viewed</span> 2.8k times </div> </div> <div id="mainbar" role="main" aria-label="questions and answers"> <div id="question" class="question" data-questionid="3286991" data-ownerid="248413" data-score="60"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="3286991"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="60">60</div> <button class="js-bookmark-btn s-btn s-btnunset c-pointer py4"> <svg aria-hidden="true" class="svg-icon iconBookmark" width="18" height="18" viewBox="0 0 18 18"><path d="M6 1a2 2 0 00-2 2v14l5-4 5 4V3a2 2 0 00-2-2H6zm3.9 3.83h2.9l-2.35 1.7.9 2.77L9 7.59l-2.35 1.7.9-2.76-2.35-1.7h2.9L9 2.06l.9 2.77z"></path></svg> <div class="js-bookmark-count mt4" data-value="0">0</div> </button> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>I'm experimenting with some styles on <code><textarea></code>s and I tried doing some stuff with <code>::before</code> and <code>::after</code> selectors and I couldn't to anything to get them to work. So the question is: is this possible? I know the CSS surrounding forms is arcane beyond mention but it seems like this should work.</p></div> <div class="mt24 mb12"> <div class="post-taglist grid gs4 gsy fd-column"> <div class="grid ps-relative"> <a href="../../questions/tagged/html" class="post-tag js-gps-track" title="show questions tagged 'html'" rel="tag">html</a> <a href="../../questions/tagged/css" class="post-tag js-gps-track" title="show questions tagged 'css'" rel="tag">css</a> <a href="../../questions/tagged/forms" class="post-tag js-gps-track" title="show questions tagged 'forms'" rel="tag">forms</a> <a href="../../questions/tagged/css-selectors" class="post-tag js-gps-track" title="show questions tagged 'css-selectors'" rel="tag">css-selectors</a> <a href="../../questions/tagged/pseudo-element" class="post-tag js-gps-track" title="show questions tagged 'pseudo-element'" rel="tag">pseudo-element</a> </div> </div> </div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="edited Jul 14 '13 at 07:03">edited Jul 14 '13 at 07:03</time> <a href="../../users/703717/danield" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/703717.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Danield" /> </a> <div class="s-user-card--info"> <a href="../../users/703717/danield" class="s-user-card--link">Danield</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">121,619</li> <li class="s-award-bling s-award-blinggold" title="37 gold badges">37</li> <li class="s-award-bling s-award-blingsilver" title="226 silver badges">226</li> <li class="s-award-bling s-award-blingbronze" title="255 bronze badges">255</li> </ul> </div> </div> </div> <div class="post-signature owner grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Jul 20 '10 at 04:16">asked Jul 20 '10 at 04:16</time> <a href="../../users/248413/xj9" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/248413.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="xj9" /> </a> <div class="s-user-card--info"> <a href="../../users/248413/xj9" class="s-user-card--link">xj9</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">3,381</li> <li class="s-award-bling s-award-blinggold" title="2 gold badges">2</li> <li class="s-award-bling s-award-blingsilver" title="24 silver badges">24</li> <li class="s-award-bling s-award-blingbronze" title="23 bronze badges">23</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-3286991" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="3286991" data-min-length="15"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> <li id="comment-3403058" class="comment js-comment " data-comment-id="3403058" data-comment-owner-id="39992" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment3403058_3286991"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Do you mean `:before` and `:after`? And, they work fine here; what are you trying to accomplish? Are you hitting browser-specific issues?</span> – <a href="../../users/39992/strager" title="88,763 reputation" class="comment-user ">strager</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/3286991/can-a-before-selector-be-used-with-a-textarea#comment3403058_3286991"><span title="2010-07-20T04:23:14.187 License: CC BY-SA 2.5" class="relativetime-clean">Jul 20 '10 at 04:23</span></a></span> </div> </div> </li> <li id="comment-3403087" class="comment js-comment " data-comment-id="3403087" data-comment-owner-id="248413" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment3403087_3286991"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Yes, thats what I meant. And I don't think its anything browser specific. I'm taking some ideas from http://nicolasgallagher.com/demo/pure-css-speech-bubbles/bubbles.html and everything was working with your standard block-level elements but not when applied to a textarea.</span> – <a href="../../users/248413/xj9" title="3,381 reputation" class="comment-user owner">xj9</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/3286991/can-a-before-selector-be-used-with-a-textarea#comment3403087_3286991"><span title="2010-07-20T04:30:44.433 License: CC BY-SA 2.5" class="relativetime-clean">Jul 20 '10 at 04:30</span></a></span> </div> </div> </li> <li id="comment-3403093" class="comment js-comment " data-comment-id="3403093" data-comment-owner-id="236587" data-comment-score="5"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> <span title="number of 'useful comment' votes received" class="warm">5</span> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment3403093_3286991"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Not working for me in Chrome and Firefox. `textarea::after{ content: "some text" }` does not work but `form::after{ content: "some text" }` does work. Please note that the double colon style is CSS3 syntax but the single colon is CSS2 syntax. Neither work on textarea.</span> – <a href="../../users/236587/rupert-madden-abbott" title="12,899 reputation" class="comment-user ">Rupert Madden-Abbott</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/3286991/can-a-before-selector-be-used-with-a-textarea#comment3403093_3286991"><span title="2010-07-20T04:32:15.780 License: CC BY-SA 2.5" class="relativetime-clean">Jul 20 '10 at 04:32</span></a></span> </div> </div> </li> <li id="comment-3403122" class="comment js-comment " data-comment-id="3403122" data-comment-owner-id="39992" data-comment-score="1"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> <span title="number of 'useful comment' votes received" class="warm">1</span> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment3403122_3286991"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">It seems Opera (the browser I use) is the odd man out, as it uses textarea's `:after` content. All I can see in the CSS2 spec on this issue is "Note. This specification does not fully define the interaction of :before and :after with replaced elements (such as IMG in HTML). This will be defined in more detail in a future specification." In other words, this may be implementation-defined behaviour.</span> – <a href="../../users/39992/strager" title="88,763 reputation" class="comment-user ">strager</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/3286991/can-a-before-selector-be-used-with-a-textarea#comment3403122_3286991"><span title="2010-07-20T04:39:05.460 License: CC BY-SA 2.5" class="relativetime-clean">Jul 20 '10 at 04:39</span></a></span> </div> </div> </li> </ul> </div> </div> </div> </div> <div id="answers"> <a name="tab-top"></a> <div id="answers-header"> <div class="answers-subheader grid ai-center mb8"> <div class="grid--cell fl1"> <h2 class="mb0" data-answercount="9">4 Answers<span style="display:none;" itemprop="answerCount">4</span></h2> </div> </div> </div> <a name="3293252"></a> <div id="answer-3293252" class="answer accepted-answer" data-answerid="3293252" data-ownerid="369707" data-score="112" itemprop="acceptedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="3293252"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="112">112</div> <div class="js-accepted-answer-indicator grid--cell fc-green-500 py6 mtn8"><div class="ta-center"><svg aria-hidden="true" class="svg-icon iconCheckmarkLg" width="36" height="36" viewBox="0 0 36 36"><path d="m6 14 8 8L30 6v8L14 30l-8-8v-8z"></path></svg></div></div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>The <code>:before</code> and <code>:after</code> will not work on a <code>text-area</code> (nor any element that cannot contain another element, such as <code>img</code> or <code>input</code>), because the generated content of the pseudo-element gets placed <strong>within</strong> the element but <em>before</em> or <em>after</em> that element's content, and acts itself as an element. The pseudo-element does not get placed before or after the parent element itself (contrary to some information one may find on the internet). To illustrate:</p> <p>If you have this css:</p> <pre><code>p:before {content: 'before--'} p:after {content: '--after'} </code></pre> <p>Then html like this:</p> <pre><code><p>Original Content</p> </code></pre> <p>Effectively renders to the screen <em>as if the source code</em> were:</p> <pre><code><p>before--Original Content--after</p> </code></pre> <p><strong><em>Not</em></strong> <em>as if the source code</em> were:</p> <pre><code>before--<p>Original Content</p>--after </code></pre> <p>Which is why tags that cannot contain any <em>html</em> element "content" (like those mentioned above) do not recognize the pseudo-elements, as there is no "place" for that content to be generated to. The <code>textarea</code> can contain "content," but only pure text content.</p></div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="user-info "> <div class="user-action-time">edited <span title="2015-07-24T13:49:48.993" class="relativetime">Jul 24 '15 at 13:49</span></div> <div class="user-gravatar32"></div> <div class="user-details" itemprop="author" itemscope="" itemtype="http://schema.org/Person"> <span class="d-none" itemprop="name">ScottS</span> <div class="-flair"></div> </div> </div> </div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered Jul 20 '10 at 18:45">answered Jul 20 '10 at 18:45</time> <a href="../../users/369707/scotts" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/369707.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="ScottS" /> </a> <div class="s-user-card--info"> <a href="../../users/369707/scotts" class="s-user-card--link">ScottS</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">71,703</li> <li class="s-award-bling s-award-blinggold" title="13 gold badges">13</li> <li class="s-award-bling s-award-blingsilver" title="126 silver badges">126</li> <li class="s-award-bling s-award-bling__bronze" title="146 bronze badges">146</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-3293252" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="3293252" data-min-length="15"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> <li id="comment-9369635" class="comment js-comment " data-comment-id="9369635" data-comment-owner-id="174172" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment9369635_3293252"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Thanks for this, was looking for a long time why :before and :after doesn't work with img tags!</span> – <a href="../../users/174172/benjamin-intal" title="2,748 reputation" class="comment-user ">Benjamin Intal</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/3286991/can-a-before-selector-be-used-with-a-textarea#comment9369635_3293252"><span title="2011-10-09T16:04:08.183 License: CC BY-SA 3.0" class="relativetime-clean">Oct 09 '11 at 16:04</span></a></span> </div> </div> </li> </ul> </div> </div> </div> </div> <a name="76483960"></a> <div id="answer-76483960" class="answer " data-answerid="76483960" data-ownerid="10854368" data-score="0" itemprop="suggestedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="76483960"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="0">0</div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>For those who are looking for a workaround, you can use <code>contenteditable</code> attribute to <code>div</code>. Be aware there are downsides when using this method.</p> <pre class="lang-css prettyprint-override"><code>#console { border: 1px solid black; } #console::before { content: ">>>"; } </code></pre> <pre class="lang-html prettyprint-override"><code><div id="console" contenteditable>Click me to edit content.</div> </code></pre> <p><a class="external-link" href="https://jsfiddle.net/CarterSnich/azfep08j/4/" rel="nofollow noreferrer">Example JSFiddle</a></p> <p>See <a href="../../a/40898337#40898337">https://stackoverflow.com/a/40898337/10854368</a>.</p></div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered Jun 15 '23 at 17:02">answered Jun 15 '23 at 17:02</time> <a href="../../users/10854368/snich" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/10854368.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="snich" /> </a> <div class="s-user-card--info"> <a href="../../users/10854368/snich" class="s-user-card--link">snich</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">67</li> <li class="s-award-bling s-award-blingsilver" title="1 silver badges">1</li> <li class="s-award-bling s-award-blingbronze" title="5 bronze badges">5</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> </div> </div> </div> <a name="62941000"></a> <div id="answer-62941000" class="answer " data-answerid="62941000" data-ownerid="10440757" data-score="-1" itemprop="suggestedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="62941000"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="-1">-1</div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><pre><code><div class='tx-div-before'></div> </code></pre> <p>use this before textarea and</p> <pre><code><div class='tx-div-after'></div> </code></pre> <p>use this code after textarea. and add before and after psedu element.</p></div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered Jul 16 '20 at 18:09">answered Jul 16 '20 at 18:09</time> <a href="../../users/10440757/shakib" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/10440757.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Shakib" /> </a> <div class="s-user-card--info"> <a href="../../users/10440757/shakib" class="s-user-card--link">Shakib</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">41</li> <li class="s-award-bling s-award-blingsilver" title="2 silver badges">2</li> <li class="s-award-bling s-award-blingbronze" title="7 bronze badges">7</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-62941000" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="62941000" data-min-length="15"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> <li id="comment-111305191" class="comment js-comment " data-comment-id="111305191" data-comment-owner-id="214143" data-comment-score="1"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> <span title="number of 'useful comment' votes received" class="warm">1</span> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment111305191_62941000"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">When adding an answer to a ten year old question with an accepted answer it is important to point out what new aspect of the question you are addressing. With technologies that may have changed over that 10 years it is also important to note if those changes change the answer.</span> – <a href="../../users/214143/jason-aller" title="3,541 reputation" class="comment-user ">Jason Aller</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/3286991/can-a-before-selector-be-used-with-a-textarea#comment111305191_62941000"><span title="2020-07-16T18:33:24.787 License: CC BY-SA 4.0" class="relativetime-clean">Jul 16 '20 at 18:33</span></a></span> </div> </div> </li> </ul> </div> </div> </div> </div> <a name="10865335"></a> <div id="answer-10865335" class="answer " data-answerid="10865335" data-ownerid="1432809" data-score="-9" itemprop="suggestedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="10865335"> <button class="js-vote-up-btn grid--cell s-btn s-btn__unset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="-9">-9</div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>Actually, you can add content with <code>:after</code> on an input element. This will add a sort of tip when the element is in its active state:</p> <pre><code>#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"> </code></pre></div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="edited May 16 '17 at 00:00">edited May 16 '17 at 00:00</time> <a href="../../users/6313073/angel-politis" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/6313073.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Angel Politis" /> </a> <div class="s-user-card--info"> <a href="../../users/6313073/angel-politis" class="s-user-card--link">Angel Politis</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">10,955</li> <li class="s-award-bling s-award-blinggold" title="14 gold badges">14</li> <li class="s-award-bling s-award-blingsilver" title="48 silver badges">48</li> <li class="s-award-bling s-award-blingbronze" title="66 bronze badges">66</li> </ul> </div> </div> </div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered Jun 02 '12 at 19:35">answered Jun 02 '12 at 19:35</time> <a href="../../users/1432809/kyle-ramirez" class="s-avatar s-avatar__32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/1432809.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Kyle Ramirez" /> </a> <div class="s-user-card--info"> <a href="../../users/1432809/kyle-ramirez" class="s-user-card--link">Kyle Ramirez</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">1</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> </div> </div> </div> </div> </div> <div id="sidebar" class="show-votes" role="complementary" aria-label="sidebar"> <div class="module sidebar-linked"> <h4 id="h-linked">Linked</h4> <div class="linked"> <div class="spacer"> <a title="Vote score (upvotes - downvotes)"><div class="answer-votes answered-accepted default">2</div></a> <a href="../../questions/28050249/styling-part-of-the-text-in-the-placeholder" class="question-hyperlink">Styling part of the text in the placeholder</a> </div> </div> <div class="linked"> <div class="spacer"> <a title="Vote score (upvotes - downvotes)"><div class="answer-votes default">3</div></a> <a href="../../questions/64605218/after-pseudo-element-in-textarea-not-working" class="question-hyperlink">::after pseudo element in textarea not working</a> </div> </div> <div class="linked"> <div class="spacer"> <a title="Vote score (upvotes - downvotes)"><div class="answer-votes answered-accepted default">0</div></a> <a href="../../questions/8352527/how-to-create-popup-type-textarea-for-webpage" class="question-hyperlink">How to create popup type textarea for webpage</a> </div> </div> <div class="linked"> <div class="spacer"> <a title="Vote score (upvotes - downvotes)"><div class="answer-votes answered-accepted default">1</div></a> <a href="../../questions/9377160/altering-form-fields-using-css-content-generation" class="question-hyperlink">Altering form fields using CSS content generation</a> </div> </div> <div class="linked"> <div class="spacer"> <a title="Vote score (upvotes - downvotes)"><div class="answer-votes answered-accepted default">1</div></a> <a href="../../questions/9507010/how-to-get-css3-ribbon-on-both-sides-of-element" class="question-hyperlink">How to get css3 ribbon on both sides of element</a> </div> </div> <div class="linked"> <div class="spacer"> <a title="Vote score (upvotes - downvotes)"><div class="answer-votes default">0</div></a> <a href="../../questions/18618154/looking-for-css-to-replace-text-or-a-way-to-target-dynamic-div-class-ids" class="question-hyperlink">Looking for CSS to replace text or a way to target dynamic DIV/Class ids</a> </div> </div> <div class="linked"> <div class="spacer"> <a title="Vote score (upvotes - downvotes)"><div class="answer-votes answered-accepted default">0</div></a> <a href="../../questions/25592161/inserting-some-text-in-textarea-using-css" class="question-hyperlink">Inserting some text in textarea using css</a> </div> </div> </div> <div class="module sidebar-linked"> <h4 id="h-linked">Related</h4> <div class="linked"> <div class="spacer"> <a title="Vote score (upvotes - downvotes)"><div class="answer-votes default">3</div></a> <a href="../../questions/64605218/after-pseudo-element-in-textarea-not-working" class="question-hyperlink">::after pseudo element in textarea not working</a> </div> </div> </div> </div> </div> </div> <script src="../../static/js/stack-icons.js"></script> <script src="../../static/js/fromnow.js"></script> </body> </html>