CSS :after without the elements background - html

Question

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

Answer 1

The pseudo element should be placed below the element itself. For the outer curve, an easy option is to use box-shadow:
#text:after {
content: " ";
position: absolute;
bottom: -8px; /* move below parent's background */
right: 1px;
width: 75%;
box-sizing: border-box;
height: 8px;
border: 1px solid #a0a4b0;
box-shadow: -4px -4px 0 4px #fff; /* white outside rounded corner */
border-width: 1px 0 0 1px;
border-radius: 8px 0 0 0;
}
Edited fiddle: http://jsfiddle.net/fzd9xd07/1/

Answer 2

Use This
#text:after {
content: url(http://www.smashingapps.com/wp-content/uploads/2009/06/create-a-slick-tabbed-content-area-using-css-and-jquery.jpg);
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;
}