This question already has answers here:
after pseudo element not appearing in code
(2 answers)
Closed 7 years ago.
I may be misunderstanding the ::before and ::after features in CSS.
What I am trying to achieve, is a box of 200x200px, and then at the top right it would have another box (24x24). Here is what I've got:
https://jsfiddle.net/xd6L3h6v/
<div id="foo">bla test</div>
#foo {
position: relative;
width: 200px;
height: 200px;
background: green;
}
#foo::before {
position: absolute; top: 0; left: 0;
background: red;
width: 24px;
height: 24px;
}
However, this does not work. When I check it in Firefox, I don't see the ::before part in Firebug's DOM inspector.
Where am I going wrong?
Thanks!
You just need to add content: '';
#foo {
position: relative;
width: 200px;
height: 200px;
background: green;
}
#foo::before {
position: absolute; top: 0; left: 0;
background: red;
width: 24px;
height: 24px;
content: '';
}
<div id="foo">bla test</div>
Related
I'm wondering if there is a way to add a link to a pseudo element. I thought it would work with content: url(), but it isn't
content: url('https://google.com');
width: 100px;
height: 100px;
}
As I searched about it, it seems that it is not possible by the standard way.
But you can achieve this through some workarounds. Here is the solution I can think of:
<div class="clickable-pseudo">
</div>
div.clickable-pseudo::after{
content: "";
width: 30px;
height: 30px;
background-color: indianred;
display: block;
position: relative;
}
a{
position: absolute;
top:0px;
left: 0px;
width: 30px;
height: 30px;
display: block;
z-index: 10;
}
The above code simply puts the anchor tag on the pseudo element.
This question already has answers here:
Lower z-indexed parent's child upon higher z-indexed element?
(2 answers)
Closed 4 years ago.
I am trying to render an element between two nested elements. This is probably best explained with an example:
#parent {
position: fixed;
top: 0;
left: 0;
width: 200px;
height: 200px;
z-index: 0;
background-color: red;
}
#child {
position: fixed;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
z-index: 2;
background-color: blue;
}
#other {
position: fixed;
top: 25px;
left: 25px;
width: 50px;
height: 50px;
z-index: 1;
background-color: green;
}
<div id="parent">
<div id="child"></div>
</div>
<!-- I want to have this element in between the "parent" and "child". -->
<div id="other"></div>
In this case, I want the green ("#other") element to be rendered in between (z-depth wise) the red parent ("#parent") and blue child ("#child") elements. In other words, I want the blue element to be on top.
From my understanding this is not possible using CSS's z-depth (like I attempted) since the elements are nested, but I can't seem to figure out a different way.
I would like to keep the HTML how it is, if possible, and do this entirely in CSS.
Thanks in advance!
just removed the position:fixed from #parent. You can add position: static; for #parent.
Please check this demo: https://codepen.io/anon/pen/dwZRMe
Your question is still not clear, so I'll recommend existing solutions.
First, you can move around elements using js, if you wish to not touch html. Refer this link.
Secondly, this kind of functionality is closely related to wrapping of elements. This is present in jquery as well.
Thirdly, you may want to check out :before and :after psuedo elements.Checkout this link.
Nesting plays a big role for z-index. If #other element sits on top of #parent element, a #child element of #parent can never be higher than #other element. This is an important rule for z-index.
In this case, you can change your HTML code in the following ways to create the shape you want.
#parent {
position: fixed;
top: 0;
left: 0;
width: 200px;
height: 200px;
z-index: 0;
background-color: red;
}
#child {
position: fixed;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
z-index: 2;
background-color: blue;
}
#other {
position: fixed;
top: 25px;
left: 25px;
width: 50px;
height: 50px;
z-index: 1;
background-color: green;
}
<div id="parent">
<div id="child"></div>
<div id="other"></div>
</div>
#parent {
position: fixed;
top: 0;
left: 0;
width: 200px;
height: 200px;
z-index: 0;
background-color: red;
}
#child {
position: fixed;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
z-index: 2;
background-color: blue;
}
#other {
position: fixed;
top: 25px;
left: 25px;
width: 50px;
height: 50px;
z-index: 1;
background-color: green;
}
<div id="parent"></div>
<div id="child"></div>
<div id="other"></div>
EDIT: To keep the HTML, no need to use any position style for #parent and remove top|left|z-index values too in it.
#parent {
width: 200px;
height: 200px;
background-color: red;
}
#child {
position: fixed;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
z-index: 2;
background-color: blue;
}
#other {
position: fixed;
top: 25px;
left: 25px;
width: 50px;
height: 50px;
z-index: 1;
background-color: green;
}
<div id="parent">
<div id="child"></div>
</div>
<div id="other"></div>
This question already has answers here:
How to connect HTML Divs with Lines? [duplicate]
(7 answers)
Closed 4 years ago.
I am trying to draw lines between divs similar to this:
I have tried using this, as I am new to css I am scratching my head to make divs around a single div. Can someone please help me out with this.
EDIT: I am trying to achieve this using css only so I can use answer of #James Montagne from this but in that case I will need to have separate classes for all 6 divs and 5 lines. I am not sure if it is the best way to achieve this as it might not be responsive? Please suggest.
You can use a static solution like this:
.boxParent{
position: relative;
width: 500px;
height: 500px;
margin: auto;
text-align: center;
}
.boxCenter{
position: absolute;
width: 100px;
height: 100px;
line-height: 100px;
border:1px solid #000000;
border-radius: 50%;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
background: #808080;
}
.boxItem {
display: inline-block;
border: 1px solid black;
padding: 1em;
position: absolute;
background: #ffffff;
}
.boxItem[data-boxItem-index]:after{
content: "";
display: block;
position: absolute;
z-index: -1;
height: 1px;
border-top: 1px solid #000000;
}
.boxItem[data-boxItem-index='1']{
top: 40%;
left: 10%;
}
.boxItem[data-boxItem-index='1']:after{
width: 200px;
transform: rotate(5deg);
}
.boxItem[data-boxItem-index='2']{
top: 10%;
left: 60%;
}
.boxItem[data-boxItem-index='2']:after{
width: 200px;
transform: rotate(113deg);
top: 120px;
left: -120px;
}
.boxItem[data-boxItem-index='3']{
top: 80%;
left: 40%;
}
.boxItem[data-boxItem-index='3']:after{
width: 200px;
transform: rotate(96deg);
top: -60px;
left: -70px;
}
<div class="boxParent">
<div class="boxCenter">TEST</div>
<div class="boxItem" data-boxItem-index="1">1</div>
<div class="boxItem" data-boxItem-index="2">2</div>
<div class="boxItem" data-boxItem-index="3">3</div>
</div>
Center element positioned absolute. Satellite elements positioned absolute around center element, Pseudo-elements inside secondary elements act as their lines. You need to play with the rotation/width/positioning for each line.
Making this responsive/dynamic requires a bit more work.
This question already has answers here:
If the child is position:absolute and the parent is overflow:hidden, why does the child overflow?
(4 answers)
Closed 4 years ago.
I have a red square (div) and an orange bar as a pseudo element (before).
I want the part of the orange bar that goes outside the parent square hidden, so I used overflow: hidden; on the parent, but it doesn't work.
.square {
width: 3.5em;
height: 3.5em;
background-color: red;
overflow: hidden;
}
.square::before {
content: "";
position: absolute;
transform: translate(2em);
width: 4.95em;
height: .65em;
background-color: orange;
}
<div class="square"></div>
You need to set position: relative to .square
.square {
width: 3.5em;
height: 3.5em;
position: relative; /* Added */
background-color: red;
overflow: hidden;
}
.square::before {
content: "";
position: absolute;
transform: translate(2em);
width: 4.95em;
height: .65em;
background-color: orange;
}
<div class="square"></div>
The problem
The pseudo element is currently positioned relative to the root.
The solution
You need to make it relative to .square instead by adding position: relative; to .square.
.square {
width: 3.5em;
height: 3.5em;
background-color: red;
overflow: hidden;
Position:relative;
}
.square::before {
content: "";
position: absolute;
transform: translate(2em);
width: 4.95em;
height: .65em;
background-color: orange;
}
<div class="square"></div>
do not know what I might be doing wrong, I tried to put it this way:
.container-image{
background: url('http://i.imgur.com/Dl8UBO7.png');
width: 226px;
height: 169px;
display: inline-block;
position: relative;
z-index: 20; // dont work
}
.container-image img{
position: absolute;
left: 14px;
top: 13px;
width: 199px;
height: 141px;
z-index: 10; // dont work
}
jsfiddle
I need the image is behind the edge (.container-image)
Put a container around the border div and the image. http://jsfiddle.net/7fqAu/2/
<div class='example'>
<div class="container-image"></div>
<img src="http://i.imgur.com/T0KMwIs.jpg">
</div>
body {
background: red;
}
.container-image {
background: url('http://i.imgur.com/Dl8UBO7.png');
width: 226px;
height: 169px;
position: relative;
z-index: 20;
}
.example {
width: 226px;
height: 169px;
position: relative;
}
.example img {
position: absolute;
left: 14px;
top: 13px;
width: 199px;
height: 141px;
z-index: 10;
}
You could add the border image to .container-image:after instead of as a background to .container-image - no need for z-index at all then.
jsfiddle here