CSS Div link text underline hover

Question

I have a simple div like this...

<a href="#">
  <div class="promo-box promo-1">
    <div class="promo-content">
     <h2>Heading here</h2>
     <p>Text content here.</p>
    </div>
  </div>
</a>

...which allows me to change background color on div hover. Works great, but as a result, I get the text inside the link showing an underline on hover. I have tried several ways to target the h2 and p, but still can't get rid of the text-decoration on hover.

Any ideas on what html element i need to target to apply text-decoration: none ?

CSS here...

.promo-box
{
text-align:center;
border-radius:5px;
padding:10px;
margin-bottom:20px;
min-height:240px;
}
h2
{
font-family:Lato, Arial, Helvetica, sans-serif;
font-weight:700;
color:#FFF;
font-size:20px;
text-decoration: none;
}
.promo-box p
{
font-family:'Open Sans', Arial, Helvetica, sans-serif;
font-weight:400;
color:#FFF;
font-size:16px;
line-height:16px;
}
.promo-1
{
background-color:#125595;
}
div.promo-1:hover;
}

Solution 1

you need to apply text-decoration to the link not to h2 or p like this:

a{
    text-decoration:none;
}

you can't apply a style text-decoration:none to element inside a line.
You can assign a class to the link if yu don't wamt to apply to all link this rule, classes are made for this.

Example insert a class inside css

.not-underline{
        text-decoration:none;
    }

update your html adding a class to your link

 <a href="#" class="not-underline>
  <div class="promo-box promo-1">
    <div class="promo-content">
     <h2>Heading here</h2>
     <p>Text content here.</p>
    </div>
  </div>
</a>

DEMO

Solution 2

You can add a parent selector name before anchor tag in CSS.

<div class='display'>
  <a href="#">
    <div class="promo-box promo-1">
      <div class="promo-content">
        <h2>Heading here</h2>
        <p>Text content here.</p>
      </div>
    </div>
 </a>
</div>

CSS:

.display a{
    text-decoration:none !important;
}

Here is a demo

Comments

[lowercase]

I understand that - but that applies to all links on the site. i want to ONLY target the links in this box. the h2 AND the P.

[Alessandro Minoccheri]

apply a class to the link and use the class selector inside css is a good way to style your link not all link @lowercase

[lowercase]

i understand, but any attempt to target those directly fails. i am doing something incorrectly.

[Alessandro Minoccheri]

no you can't style h2 and p without text-decoration because is inside a link @lowercase

[lowercase]

ok. so I want every link on my site to be underlined EXCEPT the h2 and p in the example above. How do I target just those in css. I hope that makes more sense.

[lowercase]

thanks. that worked - gave the 'a' link a class of its own to target.

[Alessandro Minoccheri]

glad to help you :) @lowercase