Question

I have a simple form in a ASPX page that have a lot of <label> and <asp:TextBox> pairing that construct the outlay of the form.

I have a requirement to add a string behind the textbox to indicate that the field is compulsory. I’d tried adding either a <span>, a <em> or a <div> after the field but it will still display the message at the bottom of the textbox.

Any way for me to achieve this?

EDIT:
I mean right hand side of the textbox, not behind as in watermark. My Bad.

EDIT for sample code:
I’d tried all the suggestion but it is still not working, thinking whether it’s my code issue or not. Below are my codes:

<label>Telephone No.</label>
<asp:TextBox ID="txtTelNo" runat="server"></asp:TextBox>
<span class="afterInput">test</span> 

any pointers? Thanks.

EDIT for Answer
As it turns out the problem lies in the css property. The template that i used has all the input assigned with the display: block property, which makes anything after the <input> element to be pushed down.

After creating a custom css class with display: inline-block and assign to them appropriately, i manage to get the result that i wanted.

Many thanks for the answer provided, especially the :after attributes and the watermark attributes.

Answer 1

See http://jsfiddle.net/ekWG9/

.required:after{
    content: "*";
    color: red;   
}​

<label>A box</label><input type="text" value="Hello" /><span class="required"></span>​

<!-- alternative HTML -->

<span class="required"><label>A box</label><input type="text" value="Hello" /></span>​

Using the :after pseudo element selector allows you to take the literal content out of the markup (e.g. you don’t have to repeat “*” over and over).

You can also use relative or absolute positioning to tweak the location of the content of the :after pseudo element. Example: http://jsfiddle.net/ekWG9/1/