Question

Heather wants a transition effect applied to the links in the gameLinks list in which a gradient-colored bar gradually expands under each link during the hover event. To create this effect, you will use the after pseudo-element and the content property to insert the bar. Create a style rule for the nav#gameLinks a::after selector that: a) places an empty text string as the value of the content property, b) places the content with absolute positioning with a top value of 100% and a left value of 0 pixels, c) sets the width to 0% and the height to 8 pixels, d) changes the background to a linear gradient that moves to right from the color value rgb(237, 243, 71) to rgb(188, 74, 0), e) sets the border radius to 4 pixels, and f) hides the bar by setting the opacity to 0.

Answer 1

Hi there Zelenky! This is a good question to practice style sheets and effects. Please find my answer below.

Step-by-step explanation:

Below CSS contains the code to answer all parts of the question.

nav#gameLinks a::after {

content: ‘’;

top: 100%;

left: 0px;

width: 0%;

height: 8px;

position: absolute;

background: -webkit-gradient(linear, right, left, from(rgb(237, 243, 71)), to(rgb(188, 74, 0));

border-radius: 4px;

opacity: 0;

}