CSS multi border

Question

I don't know why this doesn't show a extra border can you see what I'm doing wrong?

.loginSubmit {
    width: 100px;
    height: 100px;
    background: #e0e0e0;
    border: 1px solid #dedede;
    color: #555555;
    font-weight: bold;
    text-shadow: white 0px 1px;

    /* firefox */
    background: -moz-linear-gradient(top, #eaeaea, #f0f0f0 100%);
    -moz-border-radius: 5px;

    /* webkit */
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#eaeaea), to(#f0f0f0));
    -webkit-border-radius: 5px;
    position: relative;
}

.loginSubmit:before {
    width: 98px;
    height: 98px;
    content '';
    position: absolute;
    border: 1px solid black;
}

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

2

You forgot a colon in the .loginSubmit:before statement, which will make the rule invalid. So it won't render.

Make it like this:

.loginSubmit:before {
    width: 98px;
    height: 98px;
    content: ''; /* <-- extra colon here */
    position: absolute;
    border: 1px solid black;
}

This example is working in firefox:
http://jsfiddle.net/bxTv7/

Update:
Check this question: Can I use the :after pseudo-element on an input field?

edited May 23 '17 at 12:19

Community

1
1

answered Mar 16 '11 at 19:01

Marnix

6,384
4
43
78

@Mamix i cant get it to work :/ is it because its a submit button i use? – ole Mar 16 '11 at 19:06
@ole: `` doesn't seem to work indeed. Does the `input`-tag have a pseudoclass for before? Did you check if that works at all? – Marnix Mar 16 '11 at 19:17
@Mamix hm i dont know what you mean about pseudoclass have before, do you mean if the submit dont have the pseudoclass "before"? – ole Mar 16 '11 at 20:07
@ole. I mean: does `input:before` work? Does it exist? Is it specified in the HTML specifications of the w3? Or is it unsupported by all browsers? – Marnix Mar 16 '11 at 20:15
its supported i have seen alot of people use it and says you can use it to make multi border, (but only see the multi effect on divs) – ole Mar 16 '11 at 20:19
@ole: Check the question in the update. It tells you that it can only be done with containers. – Marnix Mar 16 '11 at 21:45
@Mamix that sux :( i found out i can use outline: 1px solid #333; but i use border-radius and outline dont take effect on that so :/ nothing i can do :( – ole Mar 16 '11 at 22:04
@ole: Is it really that you just want an extra border around your button or do you want something else? Why not put the button inside a div with a border? – Marnix Mar 16 '11 at 22:54
@ole: or the other way around? – Marnix Mar 17 '11 at 22:48

CSS multi border

1 Answers1