在 CSS 中使用 :before 和 :after 伪元素创建这样的边框？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10166250/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-30 03:36:27 来源:igfitidea点击:
Creating a border like this using :before And :after Pseudo-Elements In CSS?
提问by Shoebox
Objective
客观的
I want to be able to create a border like thisin css, maybe using pseudo elements then a background image.
我希望能够创造像一个边界这个在CSS中，可能使用伪元素，然后一个背景图像。
Code
代码
HTML
HTML
<div id="footer"></div>
CSS
CSS
#footer {
background: #4b4b4b;
color: #868686;
padding: 0;
position: relative;
height: 100px;
width: 900px;
}
#footer:before {
content: "";
display: block;
width: 220px;
background-color: #e1e1e1;
height: 8px;
}
回答by Yogu
See the following snippet, is this what you want?
看下面的片段，这是你想要的吗？
body {
background: silver;
padding: 0 10px;
}
#content:after {
height: 10px;
display: block;
width: 100px;
background: #808080;
border-right: 1px white;
content: '';
}
#footer:before {
display: block;
content: '';
background: silver;
height: 10px;
margin-top: -20px;
margin-left: 101px;
}
#content {
background: white;
}
#footer {
padding-top: 10px;
background: #404040;
}
p {
padding: 100px;
text-align: center;
}
#footer p {
color: white;
}<body>
<div id="content"><p>#content</p></div>
<div id="footer"><p>#footer</p></div>
</body>回答by Virendra Yaduvanshi
#footer:after
{
content: "";
width: 40px;
height: 3px;
background-color: #529600;
left: 0;
position: relative;
display: block;
top: 10px;
}
