CODEWITHSUNDEEP
htmlcss
Tonzkie
Tonzkie

Reputation: 549

Adding html content after an element using css

like what the title says I'm trying to add a specific content to a part of a page. Obviously this is a desperate resort because I'm unable to modify the codes manually. So far this is what I have.

.paper-form input[name="elements[bd67ba9a-507b-4214-98a3-5abd36562937]"]:after {
content:'test';
 }

From what I did the name selector is working but once I added the :after It just doesn't work. Can anyone tell me I'm not used to using pseudo codes. Thanks in advance.

Upvotes: 2

Views: 1063

Answers (2)

hungerstar
hungerstar

Reputation: 21685

Can I use the :after pseudo-element on an input field?

(originally quoted comment in post above)

...the answer on which it is commenting has it right. What matters is that input is a replaced element. The :before and :after pseudo-elements form part of the content of the element which is replaced, which is why it doesn't render. As is pointed out on that page, on <hr>, which a void element but not replaced, :before and :after pseudo-elements are rendered. – Alohci

Upvotes: 0

Roy Sonasish
Roy Sonasish

Reputation: 4599

:before and :after will not work with input elements, you have to write css like this

.paper-form:after {
    content:'test';
 }

well described in this article http://www.w3.org/TR/CSS2/generate.html#before-after-content

Upvotes: 3

Related Questions