Consider:
<div class="auth-form-frame">
Some very long text
</div>
If I give a background color to .auth-form-frame::before, the text becomes invisible:
.auth-form-frame {
position: relative;
width: 50rem;
height: 25rem;
color: #000;
font-size: 10rem;
&:before {
content: "";
background-size: cover;
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
background-color: green; // This creates the problem
}
> * {
z-index: 100;
}
}
The full example appears in jsbin.
Why does this happen? How can I make the content visible despite the background color of the pseudo-element of <div>?
You need to set the z-index of the before pseudo-element:
&:before {
content: "";
background-size: cover;
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
background-color: green; // This creates the problem
z-index: -1; /* ADD THIS */
}
> * {
z-index: 100;
}
}
While the pseudo element is sort of content of its 'owning' element you can position the owner and before and after pseudo elements relative to each other z-indexwise.
Related
I would like to create a following shaped notice bar on the bottom of my webpage (sticky).
Here is my HTML
<div class="notice-container">
<div class="wave"></div>
<div>
<p>Content here</p>
</div>
</div>
And here is my CSS, I tried several things, but here is the latest:
.notice-container {
display: block;
height: auto;
background-color: #ccc;
position: fixed;
bottom: 0;
left: 0;
right: 0;
width: 100%;
}
.wave:after {
content: "";
background-image: url('../wave.png');
background-repeat: repeat-x;
position: absolute;
top: 0;
margin: -30px;
width: 100%;
height: auto;
}
Since the container has a position: fixed, how can I get the repeat-x work on the wave? I would like to display the background-image on top of the container div.
Your pseudo element needs display: block; and also a specified height attribute. Since the value auto would just tell it to extend to fit its contents (and it has none), then the height value would remain 0.
.wave:after {
content: "";
display: block; /* <- Add this */
background-image: url('../wave.png');
background-repeat: repeat-x;
position: absolute;
top: 0;
margin: -30px;
width: 100%;
height: 60px; /* Or whatever your wave.png requires */
}
Place your url and justice the sizes of image in background-size. Also do not forget to change needed height of pseudo element which is also needs to configure margin-top and top
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
footer {
width: 100%;
height: 70px;
border: 5px solid red;
border-top: 0;
margin-top: 20px;
position: relative;
}
footer:after {
width: 100%;
display: block;
content: '';
height: 20px;
position: absolute;
left: 0;
top:-20px;
background-image: url(https://i.stack.imgur.com/z4HMY.png);
background-size: 10% 20px;
}
<footer></footer>
I need to create a top border around a top that leaves a partial gap. Something such as:
____________________________ (gap) __________________________
| |
| |
The gap I'm trying to create is on the TOP (ignore the ones on the side, that's just to emphasize it's a div). The gap may or may not be perfectly centered -- in other words, it may vary where the gap exists.
Is it possible to do this with css?
You can use a pseudo element absolutely positioned in your container with a background color that matches whatever the background of your page is.
div {
height: 100px;
border: 1px solid black;
position: relative;
}
div:after {
position: absolute;
top: -1px; left: 50%;
transform: translateX(-50%);
content: '';
background: #fff;
width: 100px;
height: 1px;
}
<div></div>
The accepted answer has one flaw, if one want the gap to be "transparent" on top of its background, it won't work if the background is not a solid color.
So to do it on any background, like images, gradient etc., use both pseudo elements, like this:
By altering each pseudo element's width one control both where the gap will be, and its size.
body {
background-image: linear-gradient(to right, orange , yellow);
}
div {
position: relative;
width: 80%;
left: 10%;
top: 45vh;
transform: translateY(-50%);
height: 80px;
border: 1px solid black;
border-top: none;
}
div::before, div::after {
content: '';
position: absolute;
top: 0;
height: 1px;
background: black;
}
div::before {
left: 0;
width: 20%;
}
div::after {
right: 0;
width: 60%;
}
<div>
</div>
And for anyone who need at text in the gap, here's how-to.
body {
background-image: linear-gradient(to right, orange , yellow);
}
div {
position: relative;
width: 80%;
left: 10%;
top: 45vh;
transform: translateY(-50%);
height: 80px;
border: 1px solid black;
border-top: none;
}
div::before, div::after {
content: '';
position: absolute;
top: 0;
height: 1px;
background: black;
}
div::before {
left: 0;
width: 20%;
}
div::after {
right: 0;
width: 60%;
}
div span {
position: absolute;
top: 0;
transform: translateY(-50%);
text-align: center;
}
div span {
left: 20%;
}
div span {
right: 60%;
}
<div><span>Hello</span></div>
I'm trying to put an image on the right and left edges of the container's with the :before and :after.
But for some reason the containers totally .... up when I add a position absolute to the before and afters...
It has probably something to do with the standard bootstrap before and afters on the containers
Any idea how I can go around this?
.header,
.spotlight,
.main,
.footer {
>.container {
position: relative;
&:before {
content: " ";
position: absolute;
background: url("../img/right.png");
height: 100%;
display: block;
width: 6px;
right: -6px;
z-index: 999999;
top: 0;
}
&:after {
content: " ";
position: absolute;
background: url("../img/left.png");
height: 100%;
display: block;
width: 6px;
left: -6px;
z-index: 999999;
top: 0;
}
}
}
Example how the shadow(image) should look
I have a psuedo element which is a pink background inside a div like so:
<div>
Hello
</div>
div {
background-color: green;
display: inline-block;
padding: 20px;
position: relative;
}
div::after {
content: "";
background-color: pink;
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
Also here is a codepen to show what I mean: http://codepen.io/acha5066/pen/oXVPzg I want the pink background in front of the green background but behind the text Hello. How can I achieve this?
div {
background-color: green;
display: inline-block;
padding: 20px;
position: relative;
z-index: 0 /* we etablish a new stacking context */
}
div::after {
content: "";
background-color: pink;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: -1
}
<div>
Hello
</div>
A good article that will help you to understand the stacking context: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context
I'm showing an image on a page and I wish to add a mask to achieve a specific border-and-corner effect.
To do this I was hoping to use a pseudo-element in the following manner:
img
{
height: 58px;
left: 0;
position: absolute;
top: 0;
width: 58px;
z-index: 1;
&:after
{
background-image: url(images/frame.gif);
content: " ";
height: 58px;
left: 0;
position: absolute;
top: 0;
width: 58px;
z-index: 2;
}
}
But the mask image never shows up. I've also tried adding a negative left- and top-margin to 'pull' the pseudo-element back over the <img> but still nothing.
Is there a glaring error in my CSS or does the problem lie with an inherent limit to pseudo-elements?
By default the img tag is an inline element and it is not a container to add an after pseudo class. I'll suggest the following code:
div.container {
img {
display: block;
height: 58px;
left: 0;
position: absolute;
top: 0;
width: 58px;
z-index: 1;
}
&:after {
display: block;
background-image: url(images/frame.gif);
content: " ";
height: 58px;
left: 0;
position: absolute;
top: 0;
width: 58px;
z-index: 2;
}
}
Notice that the pseudo class is also a block element.