I am trying to use the CSS :after on an element #text, but not have the #text's background continue show behind the after element as I need it to be transparent. I can't just change the background of the after element to #000 because this is just an example and I have other things that should show through it. My code is below. 

HTML:

```
<div id="text">
    <div class="news">This is some sample text.</div>
</div>
<div id="logo"></div>

```

CSS:

```
body {
    background: #000;
    margin: 0;
}

#logo {
    position: relative;
    float: left;
    background: #FFFFFF;
    width: 25%;
    height: 80px;
    line-height: 80px;
    border: 1px solid #a0a4b0;
    border-top: 0;
    border-radius: 0 0 8px 8px;
    text-align: center;
    box-sizing: border-box;
}

#text {
    position: relative;
    background: #FFFFFF;
    border: 1px solid #a0a4b0;
    border-width: 0 1px 0 1px;
    padding: 5px 30px 15px;
    z-index: 100;
    line-height: 1.1;
}

#text:after {
    content: " ";
    position: absolute;
    bottom: -1px;
    right: 1px;
    width: 75%;
    box-sizing: border-box;
    height: 8px;
    border: 1px solid #a0a4b0;
    border-width: 1px 0 0 1px;
    border-radius: 8px 0 0 0;
}

```

[Fiddle Example](http://jsfiddle.net/fzd9xd07/)