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.
Related
I have the following markup
<button class="filter"><div class="radio"><div class="circle"></div></div> <span>Account Management</span></button>
and CSS
.filter {
font-size: 3vw;
text-align: left;
line-height: 1.6;
padding: 0px;
display: block;
height:auto;
overflow: hidden;
margin-bottom: 3px;
}
.filter span {
background: $leithyellow;
height: 100%;
overflow:auto;
display: block;
width: calc(100% - 60px);
float: left;
margin-left:10px;
padding-left:20px;
}
I cannot get the span to expand to 100% height of the button. Can this be done?
Heights apply only if the heights are defined properly for the ancestors. If you want the height to work, that's a tricky one. You can use one of my favourites, but you need to make sure it works in all the cases:
Give position: relative; to the parent.
Give position: absolute; to the element that needs full height and width.
Give the element, 0 values for all the sides.
Snippet
.parent {
position: relative;
width: 100px;
height: 50px;
background: red;
}
.parent .child {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: skyblue;
}
<div class="parent">
<span class="child"></span>
</div>
In the above snippet, it is noted that this can also work, if you give:
.parent {
position: relative;
width: 100px;
height: 50px;
background: red;
}
.parent .child {
position: absolute;
width: 100%;
height: 100%;
background: skyblue;
}
<div class="parent">
<span class="child"></span>
</div>
One good part about this approach is, you don't need to use the dangerous calc:
.parent {
position: relative;
width: 150px;
height: 50px;
background: red;
}
.parent .child {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 60px;
background: skyblue;
}
<div class="parent">
<span class="child"></span>
</div>
Note: On a related note, you can also have a look at this question and answer: Calc() alternative to fixed side bar with content?
Set display: flex to the parent
Set align-self: stretch for the child
This will stretch the height of the child div/button to fit the height of its parent without doing any trick.
By using position: absolute instead of flex-box, it won't be very nice eventually when you have more stuff added or re-arrange later on would be the nightmare.
There must be something that I am missing, but I am trying to use ::after in my css, but unfortunately it isn't working.
My css code is below.
.test {
height: 40px;
width: 40px;
background: #444;
}
.test::after {
position: relative;
top: 15px;
height: 240px;
width: 240px;
background: red;
}
<div class="test"></div>
You just need add content: '' to pseudo-class :after or :before and set the position to absolute.
.test {
height: 40px;
width: 40px;
background: #444;
position:relative;
}
.test:after {
position: absolute;
top: 15px;
height: 240px;
width: 240px;
background: red;
content: ''
}
<div class="test"></div>
but if you want you can use it without absolute, just add some float to it, because pseudo-classes generates like inside the parent node.
.test {
height: 40px;
width: 40px;
background: #444;
position:relative;
}
.test:after {
content: '';
background: red;
width: 10px;
height: 10px;
float: right;
}
<div class="test"></div>
But if you need use it like icon, inside the block better way use it with absolute.
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>
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
I have got the following code:
Fiddle
.item {
width: 120px;
padding: 10px;
display: block;
background-color: #CCC;
float: left;
margin: 5px;
position: relative;
}
.item .item-preview {
position: relative;
z-index: 10;
display: block;
}
.item .item-content {
/*display: none;*/
position: absolute;
left: 0px;
top: 37px;
padding: 5%;
z-index: 11;
width: 90%;
background-color: #000;
color: #FFF;
}
I want the div ".item-content", when its displayed, is always on the left side and is as wide as the whole page, how can I do that?
If you remove the position: relative from .item, you will have the desired effect. I also removed the top: 37px; to fix the vertical positioning. If you need to tweak that, use margin-top instead
Fiddle