Question

I use ASP.NET MVC 3. For my forms, I align the label’s text to the right. Also, there is a colon between the label and the input field.

Firstname: [          ]
     Last: [          ]

Can I automatically insert this colon using CSS or some C# code in MVC 3?

The best thing I came up with so far is to use the [Display(Name="Firstname:")] attribute, but this has the side effect of also including this colon in validation messages:

[Required]
[Display(Name = "Firstname:")]
[StringLength(100, ErrorMessage = "The {0} must be at least {2} character long.", MinimumLength = 1)]
public string Firstname { get; set; }

The other alternative was to use the LabelFor() method overload, but this forces me to specify the label text twice (once in the Model and once in cshtml file):

<div>
    <div class="editor-label">@Html.LabelFor(x => x.Firstname, "Firstname:")</div>
    <div class="editor-field">@Html.TextBoxFor(x => x.Firstname)</div>
</div>

Any better suggestions?

Answer 1

Through CSS, you can add the colon via the after pseudo class. You can find more information about this pseudo class here.

.editor-label > label:after {
    content: ": "
}

Working example: http://jsfiddle.net/fJQDZ/

Please note that the after pseudo class is not available in IE7.