Search code examples
jquerycssspeech

CSS speech bubble after tag causing a bug

Fiddle

ul{
    height:240px;
    border:1px solid #000;

}
#react-setting{
    background:rgba(255, 253, 200, 1);
    z-index:2;
    display:block;      
    position:absolute;
    width:125px;
    padding:6px 5px 5px 5px;
    box-shadow:0 0 2px #000;

}
#react-setting:after{
    content: "\00a0";
    display: block;
    height: 8px;
    width:8px;
    left: 18px;
    position: absolute;
    top: -4px;
    -webkit-transform: rotate( 45deg );
    -moz-transform: rotate( 45deg );
    background:rgba(255, 253, 200, 1);
        box-shadow:0 0 2px #000;
}

What I want is a continuous box-shadow around both #react-setting and its :after. Right now it looks like this:

problematic bubble

As you can see, the :after has its own complete box-shadow.

Solution

  • I got decent results using the following for #react-setting:after (fiddle):

     box-shadow: -1px -1px 1px rgba(0,0,0,.35);

    Sample:

    sample bubble