Geek Answers Handbook

How would you place the image of the “required star” before the first letter of the label using only css?

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

+5
source share
4 answers
.foo:before {
    content : "* ";
    color   : red;
}
+12
source

This is possible with some CSS, but it will not work with IE. First, you need to create a bulleted list.

Then hide the list-item-bullet item:

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

then add a new character before the list item:

ul > li:before {
    content:"*  ";
}
+3
source

CSS , , .

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

: , , , .

, , , , label.required, class label, , , , label, CSS, .

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

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; }

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

0

More articles:


All Articles