Menu
I want to be able to create a border like this in css, maybe using pseudo elements then a background image.
<div id="footer"></div>
#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;
}
941
The CSS ::before selector inserts content before a selected element. CSS :after inserts content after a specified element. These selectors are commonly used to add text before or after a paragraph or a link.
In CSS, ::before creates a pseudo-element that is the first child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default.
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>JSFiddle
57
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
