css content property using :after

Question

I have a problem, I have this input text fields in a html form, this are wrapped for this div css properties:

.formRight240 { float: left; width: 240px; margin: 5px 12px 5px 0px; }

when I try to this

.field_required{ display: inline; color: red; } 
.field_required:after{ content: "*" }

the input text field stay the same and the asterisk jump to the next line, I know the reason, everything is aligned in order to the other elements around, but is there anything I can do to display the asterisk inline with the input text field by doing changes to the field_required class? if not, what I have to change to the .formRight240.

HTML

<div class="rowElem noborder">
    <label>Customer ID:</label>
    <div class="formRight240">
        <span class="field_required"><input type="text" name="p_cust_id_c" id="req" class="validate[required,maxSize[30]]"/></span>
    </div>
    <div class="fix"></div>
</div>

Without html markups, i won't be able to help you further except for writing this : float-right, fixed-width, inline-elements, adding to the right ... Incoming headache. — Milche Patern, Sep 19 '13 at 14:20
Dear newUser, please, move your html code from your comment to add it within your question. — Milche Patern, Sep 19 '13 at 15:01

score 0 · Accepted Answer · edited May 23 '17 at 11:50

0

Check this answer, you can't add :before or :after to an input.

A solution could be to wrap your input in a span:

HTML

<span class="field_required"><input type="text" /><span>

CSS

.field_required input {
    display: inline;
    color: red;
} 
.field_required:after{ 
    content: "*";
}

DEMO

edited May 23 '17 at 11:50

Community

1
1

answered Sep 19 '13 at 14:32

GreyRoofPigeon

17,833
4
36
59

I just try it but, is not working, here is the line of my input type – Andy Chaves Sep 19 '13 at 14:42
yes but i think the problem is this, .formRight240 { float: left; width: 240px; margin: 5px 12px 5px 0px; }, do you think that may be this wrapper is making the aterisk jump just below the input type? – Andy Chaves Sep 19 '13 at 14:50
This is the HTML
Customer ID:

– Andy Chaves Sep 19 '13 at 14:57
Still works for me: http://jsfiddle.net/LinkinTED/myWeE/2/ , still the asterix is after the input. You need to check the rest of your code... – GreyRoofPigeon Sep 19 '13 at 15:11
ok fixed, this is how I had to pud the span tag --

– Andy Chaves Sep 19 '13 at 15:28

css content property using :after

1 Answers1