Can't set font-weight on the :after pseudo-element used on elements

Question

So, i've got a custom style on an input element, and I want to place some text on the input with the use of :after.

The problem i'm running into is that i cannot seem to change the font-weight on the :after element, this problem only occurs with the combination of input and :after elements.

CSS

input[type="checkbox"] { /* enable styling of the checkbox ! */
    -moz-appearance: none;
    -webkit-appearance: none;
}

input { /* set up some basic styles.... */
    background-color:#ccc;
    width:200px;
    height:200px;
    background-color:grey;
}

input:after { /* and we create the :after element */
    width:100%;
    text-align:center;
    font-weight:100; /* THIS DOESN'T WORK FOR SOME REASON */
    content: "This should be thin"; /* some text */
}

JSFIDDLE

http://jsfiddle.net/xQVfL/1/

TESTED ON

Chrome for mac (latest)

QUESTION

Why can't I set font-weight on the :after element set on an input element?

Seems to work for me.. 700 makes it bold.. and 100 makes it thin — krilovich, Aug 09 '13 at 15:07
100 basically means normal weight.. does 700 make it bold for you? look here http://www.w3schools.com/cssref/playit.asp?filename=playcss_font-weight&preval=900 — krilovich, Aug 09 '13 at 15:10
I noticed that the content doesn't show up in Firefox, but does in Chrome. The text or the gray background both do not work in FF. — Phorden, Aug 09 '13 at 15:10
@Phorden The grey background work's fine for me, it's just the font-weight that isnt working — koningdavid, Aug 09 '13 at 15:17
@koningdavid I was just pointing it out in case you were worried about browser compatibility. — Phorden, Aug 09 '13 at 15:19
@Phorden Yeah I just noticed that it's really messed up in firefox, thanks — koningdavid, Aug 09 '13 at 15:20
possible duplicate of [CSS :after pseudo element on INPUT field](http://stackoverflow.com/questions/2587669/css-after-pseudo-element-on-input-field) — Jukka K. Korpela, Aug 09 '13 at 17:02

score 2 · Accepted Answer · edited May 23 '17 at 12:09

2

This was answered here. It seems :after was intended for appending to container tags only. Can I use the :after pseudo-element on an input field?

edited May 23 '17 at 12:09

Community

1
1

answered Aug 09 '13 at 15:10

Joshua5822

341
2
10

Well... that sucks. Gonna wait a little longer, maybe someone comes up with a workaround, else ill accept you answer. – koningdavid Aug 09 '13 at 15:21

Can't set font-weight on the :after pseudo-element used on elements

1 Answers1