Q:

How to underline a Link nested in divs?

How can I underline the Link in this Code?
The Link I mean is this One:
<a href="/Censored">To the Censor <i class="uk-icon-angle-right arrowhover" style="padding-left:7px"></i>

But it has to be underlined if you hover over the First div in the Code bellow.
<li class="uk-active">
 <div class="uk-panel uk-text-left">
    <a class="uk-position-cover uk-position-z-index" href="/censored"></a>
  <div class="uk-text-center uk-panel-teaser"><img alt="Censored" src="https://censored.jpg"></div>
  <h3 class="uk-h5 uk-margin-top-remove">
    <a class="uk-link-reset" href="/censor">Censored</a> 
  </h3>
    <div class="uk-margin">Censored</div>
  <p>
    <a href="/Censored">To the Censor <i class="uk-icon-angle-right arrowhover" style="padding-left:7px"></i>
    </a>
  </p>
 </div>
</li>

I uesed this Code to Move the Icon 5px to the Right ( maybe this helps )
.uk-panel:hover .arrowhover:before,.uk-cover-panel:hover .arrowhover:before {
  padding-left: 5px
}

a:hover .arrowhover:before {
  padding-left: 5px
}

.arrowhover:before {
  padding-left: 0;
  -webkit-transition: padding-left .4s ease 0s;
  transition: padding-left .4s ease 0s
}

I hope that you Guys can help me with that :(

A:

You can achieve the underlining effect with the CSS code:
.uk-panel:hover p a {
    text-decoration: underline;
}

The text-decoration property will then be applied to all <a> elements inside of <p> elements inside of your <div id="complete-box"> element when it is hovered over.

