Trying to incorporate multiple images using pseudo-elements when a parent list-item is hovered over. Upon examining in Chrome, the pseudo-element displays but the .png image isn't showing correctly. I'm questioning if the selectors are being used properly or if there is another issue with the code. You can view a live example here.
Here's the HTML:
<main>
<section id="results">
<ul>
<li class="term-list">
<dl>
<dt class="term">hello</dt>
<dd class="pronounce">[ <strong>he</strong>-lo ]</dd>
</dl>
</li>
<li class="term-list">
<dl>
<dt class="term">word</dt>
<dd class="pronounce">[ <strong>wurd</strong> ]</dd>
</dl>
</li>
<li class="term-list">
<dl>
<dt class="term">another</dt>
<dd class="pronounce">[ uh-<strong>nuth</strong>-er ]</dd>
</dl>
</li>
<li class="term-list">
<dl>
<dt class="term">aviation</dt>
<dd class="pronounce">[ ay-vee-<strong>ay</strong>-shun ]</dd>
</dl>
</li>
<li class="term-list">
<dl>
<dt class="term">hello</dt>
<dd class="pronounce">[ <strong>he</strong>-lo ]</dd>
</dl>
</li>
</ul>
</section>
</main>
CSS:
.term-list {
border-top: 1px solid gray;
color: gray;
padding: 15px 10px;
}
.term-list:last-child {
border-bottom: 1px solid gray;
}
.term-list:hover,
.term-list:hover + .term-list {
border-top: 1px solid white;
-webkit-transition: border-top .2s ease-in-out;
-moz-transition: border-top .2s ease-in-out;
-ms-transition: border-top .2s ease-in-out;
-o-transition: border-top .2s ease-in-out;
transition: border-top .2s ease-in-out;
}
.term-list:hover {
color: white;
-webkit-transition: color .2s ease-in-out;
-moz-transition: color .2s ease-in-out;
-ms-transition: color .2s ease-in-out;
-o-transition: color .2s ease-in-out;
transition: color .2s ease-in-out;
cursor: pointer;
}
.term-list:hover::last-child {
border-bottom: 1px solid white;
-webkit-transition: border-bottom .2s ease-in-out;
-moz-transition: border-bottom .2s ease-in-out;
-ms-transition: border-bottom .2s ease-in-out;
-o-transition: border-bottom .2s ease-in-out;
transition: border-bottom .2s ease-in-out;
}
.term-list:hover dl::after {
content: "";
display: inline-block;
position: absolute;
right: 5px;
top: 50%;
margin-top: -20px;
width: 40px;
height: 40px;
background-size: 40px 40px;
background: url("https://preview.c9users.io/patbrennan/demo-project/launchschool/249/dictionary/images/arrow-right.png") 0 0 no-repeat;
}