上分度，伪elemets宽度100％之前和位置绝对

Question

看看这个例子 -​​

我需要div的绝对带位置：和后：前peseudo元素，但背景有错误： （

如何修复蓝色背景，它不带有红色背景重叠？

<div class="button_box"> 
    <div class="blue_button"></div> 
</div> 
<br /> 
<div style="width: 200px; background: green;">i am 200px</div> 

和CSS

.button_box { 
    width: 200px; 
    height: 29px; 
    position: relative; 
} 
.blue_button:after { 
    background: none repeat scroll 0 0 red; 
    border-radius: 0 12px 12px 0; 
    content: ""; 
    display: block; 
    height: 29px; 
    position: absolute; 
    right: 0; 
    top: 0; 
    width: 12px; 
} 
.blue_button:before { 
    background: none repeat scroll 0 0 red; 
    border-radius: 12px 0 0 12px; 
    content: ""; 
    display: block; 
    height: 29px; 
    left: 0; 
    position: absolute; 
    top: 0; 
    width: 12px; 
} 
.blue_button { 
    background: none repeat scroll 0 0 blue; 
    cursor: pointer; 
    height: 29px; 
    position: absolute; 
    width: 100%; 
} 

Answer 1

http://jsfiddle.net/5esgD/3/

如果我知道你想什么正确的，只是添加边框半径.blue-button

.blue_button { 
    background: none repeat scroll 0 0 blue; 

    border-radius: 12px 12px 12px 12px; 
    cursor: pointer; 
    height: 29px; 
    position: absolute; 
    width: 100%; 
}