html - How to add content to an input with css? -
this question has answer here:
see codepen below: http://codepen.io/ignaciodenuevo/pen/pqwvqe
<input type="text" class="asterisk"> body { background-color:#333; } input { position: absolute; font-size: 1rem; padding: 10px 10px 10px 5px; background: #fafafa; color: #cc3366; width: 300px; border-bottom: 1px solid #cc3366; left: 425px; top: 60px; } .asterisk:before { right:20px; text-align:right; content: "*"; font-size: 3rem; color: #cc3366; } i want add asterisk, in image on left input on right.
i stuck , it's stupid don't see.
the pseudo selector :before , :after doesn't work input element. can try workaround overcome situation. 1 be, wrap input element div , use :before selector div
<div class="asterisk"> <input type="text" /> </div> css
.asterisk:before { text-align:right; content: "*"; font-size: 1.5em; color: #cc3366; vertical-align:middle; }
Comments
Post a Comment