CSS: after background of elements
I am trying to use CSS: After on a #text element but no #text background, keep showing 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 to display 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;
}
+3
source to share
2 answers
The pseudo-element must be placed below the element itself. For an outer curve, a simple option is to use box-shadow:
#text:after {
content: " ";
position: absolute;
bottom: -8px; /* move below parent 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/
+1
source to share
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;
}
0
source to share