我正在尝试在#text 元素上使用CSS :after,但没有让#text 的背景继续显示在after 元素后面,因为我需要它是透明的。我不能只将 after 元素的背景更改为 #000,因为这只是一个示例,我还有其他应该通过它显示的内容。我的代码如下。
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;
}
最佳答案
伪元素应该放在元素本身的下面。对于外曲线,一个简单的选择是使用 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;
}
编辑 fiddle :http://jsfiddle.net/fzd9xd07/1/
关于html - CSS :after without the elements background,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26129078/