No "hover-styling" for :before- / :after-pseudo classes?

Hey guys,

please have a short look on this exercise:

https://www.codecademy.com/paths/front-end-engineer-career-path/tracks/fecp-22-improved-styling-with-css/modules/wdcp-22-learn-secondary-navigation/lessons/ui-breadcrumb-nav/exercises/ui-breadcrumb-nav-styles

According to the last steps the breadcrumb-arrows should be painted COMPLETELY blue when being hovered over, or did I get this wrong? :slight_smile:

I don’t understand, why the heads and tails of my arrows won’t change the color. Only the “body” will turn blue… Here is the CSS i wrote for this exercise. Any suggestions?

.breadcrumb {
text-align: left;
}
.breadcrumb li {
float: left;
}

.breadcrumb a {
color: #fff;
background: darkcyan;
text-decoration: none;
position: relative;
height: 30px;
line-height: 30px;
text-align: center;
margin-right: 15px;
padding: 0 5px;
}

.breadcrumb a::before,
.breadcrumb a::after {
content: “”;
position: absolute;
border-style: solid;
border-width: 15px 5px;
}

.breadcrumb a::before{
left: -10px;
border-color: darkcyan;
border-left-color: transparent;
}

.breadcrumb a::after{
left: 100%;
border-color: transparent;
border-left-color: darkcyan;
}

.breadcrumb a:hover {
background-color: blue;

.breadcrumb a:hover:before {
border-color: blue;
border-left-color: transparent;
}

.breadcrumb a:hover:after {
border-left-color: blue;
}

Hi there,

If you’re still having trouble with this lesson, take a good look at your CSS, particularly this section:

Hi @kirativewd,

I checked this section, what I did not exactly copy was the “::” for “::before” and “::after” but this did not change the behaviour. It is still not working. :frowning:

What I noticed ist, that the console does not color the sections “a:hover:before” and “a:hover:after” typically red (like other pseudo-classes). Did I miss something there? Did you notice anyithing?

No problem, then!

If your code looks exactly like this:

.breadcrumb a:hover {
background-color: blue;

.breadcrumb a:hover:before {
border-color: blue;
border-left-color: transparent;
}

.breadcrumb a:hover:after {
border-left-color: blue;
}

There is a missing } on:

.breadcrumb a:hover {
background-color: blue;

1 Like

My oh my… Classic. I was looking for zebras instead of horses. :smiley: Thank’s a lot for the help!

1 Like