Hi I've got follow div:
.box {
width: 100px;
height: 20px;
border: 1px solid black;
}
.box:after {
content: '';
width: 20px;
height: 20px;
background-color: blue;
}
<div class="box"></div>
I would like to add a second div to the .box with pseudo class after. I thought it would work like this, but nothing happens. It should look like this:
How to do this with after?
Thanks.
Try This
.box {
width: 100px;
height: 20px;
border: 1px solid black;
}
.box:after {
content: '';
width: 20px;
height: 20px;
background-color: blue;
display:block;
float:right;
}
<div class="box"></div>
You're code is right, the only thing missing is the property display to that element. Just add a display: block on the :after element. To easily manipulate the pseudo-element, make the main element position: relative, then the :after as position: absolute and place it based on the .box div, something like this :
.box {
width: 100px;
height: 20px;
border: 1px solid black;
position: relative; /* Made it relative */
}
.box:after {
content: '';
position: absolute;
display: block;
width: 20px;
height: 20px;
border: 1px solid blue;
top: -1px; /* To compensate the border on the main element */
background-color: blue;
left: 100%; /* To place it after the main element */
}
If you truly need another div, try adding some javascript, like this
$(document).ready(function() {
$('.box').append('<div class="another-box"></div>');
});
.box {
width: 100px;
height: 20px;
position: relative;
border: 1px solid black;
}
.box:after {
content: '';
width: 20px;
bottom: -1px;
right: -21px;
top: -1px;
position: absolute;
background-color: blue;
}
<div class="box"></div>
Related
This may be a stupid question, but I have to clarify this fact. So this is my concern. I can style two div elements to look like below.
.element-container{
display: flex;
position: relative;
width: 300px;
height: 100px;
}
.element{
z-index:1;
width: 100%;
height: 100%;
position: absolute;
background-color: Transparent;
background-repeat:no-repeat;
border-radius: 20px;
display: inline-block;
border: 2px solid black;
}
.element-shadow{
z-index: -1;
top: 10%;
left: 4%;
border-radius: 20px;
background-color: yellow;
height: 100%;
width: 100%;
position: absolute;
}
<div class="element-container">
<div class="element"></div>
<div class="element-shadow"></div>
</div>
my question is can we do the same using ::after pseudo element. Basically can we add an html element after some other element rendered in to DOM (make the shadow effect after element is created, so someone does not need to concern about the actual size of the element when use it somewhere if the shadow element created with the same styles but with ::after pseudo element)
#Telary's answer is acceptable with this upper part of the question(original question) But now it directs me to another question, I was try to did the same with an <button>, but it does not work as expected. what did I miss here? Below code is my new problem
.but{
position: absolute;
background-color: Transparent;
background-repeat:no-repeat;
cursor:pointer;
outline:none;
border-radius: 500px;
display: inline-block;
border: 2px solid black;
color: black;
font-size: 250%;
padding: 20px 100px;
}
.but:after{
content:'';
z-index: -1;
top: 8%;
left: 3%;
border-radius: 500px;
display: inline-block;
background-color: rgba(140,122,230,1);
position: absolute;
}
<button class="but">GO</button>
Is it because I removed the outer <div> element?
You can use the code below to achieve the needed effect:
.element-container{
display: flex;
position:relative;
width: 300px;
height: 100px;
z-index: 1;
}
.element{
width: 100%;
height: 100%;
position: absolute;
background-color: Transparent;
background-repeat:no-repeat;
border-radius: 20px;
display: inline-block;
border: 2px solid black;
}
.element:after{
content:'';
display: inline-block;
top: 10%;
left: 4%;
border-radius: 20px;
background-color: yellow;
height: 100%;
width: 100%;
position: absolute;
z-index: -1;
}
<div class="element-container">
<div class="element"></div>
</div>
You need to remove z-index in ".element" selector, to put it on the top of "shadow" layer.
I am trying to make a border that connects a horizontal line from the right. The sketch below is how it should look like, and I need ideas on how to create this. Thank you! I would greatly appreciate it on anyone who can help me.
Here is a working example.
#example {
position: relative;
}
#example:before {
content: "";
display: block;
width: 100%;
height: 0px;
position: absolute;
top: 50%;
left: 0px;
border-bottom: solid 1px #999;
}
#example span {
position: relative;
display: inline-block;
padding: 5px;
color: #999;
background: #FFF;
border: solid 1px #999;
}
<div id="example">
<span>LATEST PRODUCTS</span>
</div>
<style type="text/css">
.test {
width: 100%;
height: 50px;
background-color: #F0F;
position: relative;
}
.test:before {
width: 100%;
height: 1px;
left: 0;
top: 50%;
content: "";
background-color: #eee;
position: absolute;
}
</style>
<div class="test"></div>
Is it possible to make this shape in CSS3?
You can do something like this, using a pseudo selector of after.
CODEPEN LINK
CSS
div {
height: 200px;
background: blue;
position: relative;
width: 400px;
}
div:after {
content: '';
position: absolute;
top: -50px;
left: -200px;
border-top: 300px solid white;
border-left: 300px solid white;
width: 0;
background: #fff;
border-radius: 300px;
}
div {
margin: 50px;
position: relative;
background-color: red;
width: 200px;
height: 50px;
border: 2px solid black;
}
div::after {
content: '';
position: absolute;
background-color: green;
width: 100px;
height: 100px;
border-radius: 100%;
top: -25px;
left:50px;
border: 2px solid black;
}
div.overflow-hidden {
overflow: hidden;
}
<div>1st</div>
<div class="overflow-hidden">2nd</div>
1st case: as expected.
2nd case[overflow-hidden]: Middle part of top and bottom border should be green. Looks like circle is not above its parent div's border. Is there any way to make it above it? Whats happening here? Will the z-index work?
Why is this happening?
This is because overflow: hidden; clips the content to the content box.
hidden
Content is clipped if necessary to fit the content box. No scrollbars
are provided.
MDN Web docs - https://developer.mozilla.org/en/docs/Web/CSS/overflow
This can be seen in the first example below as I have changed the border to be transparent.
What can you do?
One way to get around this would be to apply the border using an absolutely positioned pseudo element instead of to the containing div.
div {
background-color: red;
height: 50px;
margin: 50px;
overflow: hidden;
position: relative;
width: 200px;
}
div::after {
background-color: green;
border: 2px solid black;
border-radius: 100%;
content: '';
height: 100px;
left: 50px;
position: absolute;
top: -25px;
width: 100px;
}
div.overflow-with-border {
border: 2px solid transparent;
}
div.overflow-with-pseudo {
padding: 2px;
}
div.overflow-with-pseudo::before {
border: 2px solid black;
box-sizing: border-box;
content: '';
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
<div class="overflow-with-border">1st</div>
<div class="overflow-with-pseudo">2nd</div>
Here is the fiddle.
I have two div elements.
<div class="parent">
<div class="child">
</div>
</div>
And CSS code for that.
.parent {
height: 20px;
width: 100px;
background-color: #080;
position: relative;
}
.child {
position: absolute;
width: 80px;
height: 200px;
background-color: #008;
right: -10px;
top: 30px;
}
.child:before {
border-right: 10px solid transparent;
border-bottom: 10px solid #008;
border-left: 10px solid transparent;
top: -10px;
width: 0;
height: 0;
content: "";
position: absolute;
left: 50%;
}
How to position .child:before related to .parent without JS. I know solution with .parent:before, but it is not good for me.
I think this is what you are trying to do.
I think you will find this more robust and scalable.
.parent {
height: 20px;
width: 100px;
background-color: #080;
position: relative;
}
.child {
position: absolute;
width: 80px;
height: 200px;
background-color: #008;
left: 50%;
/* note 50% */
top: 30px;
margin-left: -20px;
/* 2x your arrow size */
}
.child:before {
position: absolute;
border-right: 10px solid transparent;
border-bottom: 10px solid #008;
border-left: 10px solid transparent;
top: -10px;
/* your border size */
margin-left: 10px;
/* your border-size */
width: 0;
height: 0;
content: "";
left: 0;
}
<div class="parent">
<div class="child">
</div>
</div>
You can only position an element absolutely in relation to the closest parent that is itself positioned. In your case, that's .child.
If .child and .child:before are not related in your layout, why not put .child:before in the parent element, either as .parent:before, or as its own element?
Alternatively, if your elements both have fixed widths as in your example, just give the pseudo-element a fixed pixel position as well. Demonstration.