I've been experimenting with the :after selector to create an inside-border effect in every div I hover over. However, I'm facing an issue where the ":after" pseudo-class doesn't seem to work. Any insights on why this selector isn't functioning as expected? I'm keen on using both the :hover and :after pseudo-classes together!
Check out this EX
Thank you!
<body>
<h1>Example Six</h1>
<p>Grade: A</p>
<p>This is the thing</p>
<div class="w3c">
<div id="tab16">
<a href="#tab16">Cars</a>
<div class="test">
<div><img alt="" src="http://placehold.it/176x106/" /></div>
</div>
</div> <!-- ends tab16 -->
<div id="tab17">
<a href="#tab17">Other Cars</a>
<div>
<div><img alt="" src="http://placehold.it/180x110/" /></div>
<div><img alt="" src="http://placehold.it/180x110/" /></div>
</div>
</div> <!-- ends .w3c -->
</body>
The CSS:
@charset "utf-8";
/* CSS Document */
.w3c {
min-height: 250px;
position: relative;
width: 554px;
}
.w3c > div {
display: inline;
}
.w3c > div > a {
margin-left: -1px;
position: relative;
left: 1px;
text-decoration: none;
color: #fff;
background: #666666;
display: block;
float: left;
padding: 5px 10px;
border: 1px solid #ccc;
border-bottom: 1px solid white;
}
.w3c > div:not(:target) > a {
border-bottom: 0;
background: #b0b0b0;
/*-moz-linear-gradient(top, white, #eee); */
}
.w3c > div:target > a {
background: white;
color: #b0b0b0;
}
.w3c > div > div {
background: white;
z-index: 0;
left: 0;
top: 30px;
bottom: 0;
right: 0;
padding: 10px;
border: 1px solid #ccc;
width: 596px;
height: 133px;
}
.w3c div div > div {
border: 1px solid red;
float: left;
width: 180px;
height:110px;
margin-left: 10px;
}
.w3c div div > div:hover:after {
border: 1px solid black;
width:178px;
height: 108px;
}
/* .w3c > div > div > a > img:after {
border: 2px solid black;
width:178;
height: 108px;
} */
.w3c > div:not(:target) > div {
position: absolute;
}
.w3c > div:target > div {
position: absolute;
z-index: 1;
}