如何仅使用css在标签的第一个字母前放置一个“必需的星号”图像？

Question

Is it possible to place a 'required asterisk' image in front of the first letter of a label only using css? The text of the label is right aligned, so there is a varying length of space in front of the text of each label.

Answer 1

.foo:before {
    content : "* ";
    color   : red;
}

Answer 2

It is possible with some CSS, but it won't work with IE. First, you need to create a bulleted list.

Next, hide the list-item-bullet:

ul > li {
    list-style-type:none;
    list-style-position:inside;
}

then add a new symbol in front of the list-item:

ul > li:before {
    content:"*  ";
}

Answer 3

If you wish to place an image using CSS, without modifying content, then you need to use a background image, eg

label {
  padding-left: 12px;
  background: url(asterisk.png) no-repeat;
}

This implies an accessibility problem: people using nonvisual browsing won't get the information about requiredness, since there is no way to specify a textual alternative to a background image.

On the other hand, to limit the effect to only such labels that relate to required fields, you would need to use a class selector, say label.required , and add a class attribute to the relevant label elements. Then I suppose you could just as well modify the content by adding an actual image before the relevant label elements, without resorting to CSS, eg

<img src=asterisk.png alt="Required "><label ...

Answer 4

Just use padding .

<label for="required"><span>Required</span></label> 
<input type="text" name="required" id="required" />

CSS:

label {
    text-align: right;
    width: 200px;
    vertical-align: middle;
    display: inline-block; }
label span {
    background: url(http://placehold.it/5x5) 0 0 no-repeat;
    padding: 0 0 0 6px;
    vertical-align: middle;
    display: inline-block; }
input {
    vertical-align: middle;
    display: inline-block; }

Preview: http://jsfiddle.net/Wexcode/j475V/1/