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

Answer:

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

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;

}