CODEWITHSUNDEEP
htmlcss
Angular
Angular

Reputation: 623

simple css apply background-color only on anchor

I want to apply a background color to only my anchor tags and NOT the font-icon. I nested the < span > because I need the icon to also be clickable.

If i take that span fa-fa-angle-down class and put it outside the anchor, everything looks good ( this is what I want ), but it's not clickable.

<span class='http_method'>

          <a href='test' class="toggleOperation"> <span class="fa fa-angle-down"></span> method</a>
          </span>



span {
    margin: 0;
    margin-left: 10px;
    padding: 0;
}

.http_method a{ background: linear-gradient(#4c99d7,#1a66a3);
    border: 1px solid #1a66a3;
    height: 25px;
    line-height: 10px;
    vertical-align: middle;
}

.http_method span{
font-size: 30px;
    margin-right: 10px;
    padding-left: 10px;
    vertical-align: middle;
    color: #686b6d;
}

https://jsfiddle.net/c2Ln1cab/1/

Upvotes: 3

Views: 419

Answers (3)

Chizzle
Chizzle

Reputation: 1715

Why not just add a span for what you want the gradient on and then you can have both inside the anchor?

span {
  margin: 0;
  margin-left: 10px;
  padding: 0;
}

.http_method a {
  height: 25px;
  line-height: 10px;
  vertical-align: middle;
}
.http_method a span.gradient{
  background: linear-gradient(#4c99d7, #1a66a3);
  border: 1px solid #1a66a3;
}
.http_method span {
  font-size: 30px;
  margin-right: 10px;
  padding-left: 10px;
  vertical-align: middle;
  color: #686b6d;
}
<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">


<span class='http_method'>
 
<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">


<span class='http_method'>
 
<a href='test' class="toggleOperation"> 
<span class="fa fa-angle-down"></span><span class="gradient">method</span>
</a>
</span>

</span>

Upvotes: 2

Ernesto Mayoral Cabezas
Ernesto Mayoral Cabezas

Reputation: 737

Just put the spans inside the anchor, an them work from there:

Example:

html:

<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

<a href='test' class="toggleOperation">

 <span class="fa fa-angle-down"></span><span class="span-colored">method</span>

</a>

css:

span {
    margin: 0;
    margin-left: 10px;
    padding: 0;
}

.http_method a:not(span){ background: linear-gradient(#4c99d7,#1a66a3);
    border: 1px solid #1a66a3;
    height: 25px;
    line-height: 10px;
    vertical-align: middle;

}

.http_method span{
font-size: 30px;
    margin-right: 10px;
    padding-left: 10px;
    vertical-align: middle;
    color: #686b6d;
}

https://jsfiddle.net/c2Ln1cab/5/

Upvotes: 0

Narxx
Narxx

Reputation: 8309

Instead of giving the anchor tag, styling, think about creating a new class with that style, and apply that class wherever needed.

This way you are not depended on tags and are not constraining the construction (HTML) with style (CSS).

span {
    margin: 0;
    margin-left: 10px;
    padding: 0;
}

.http_method .link{ background: linear-gradient(#4c99d7,#1a66a3);
    border: 1px solid #1a66a3;
    height: 25px;
    line-height: 10px;
    vertical-align: middle;
}

.http_method span{
font-size: 30px;
    margin-right: 10px;
    padding-left: 10px;
    vertical-align: middle;
    color: #686b6d;
}
<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
 

<span class='http_method'>
<a href='test' class="toggleOperation"><span class="link">method</span>
 <span class="fa fa-angle-down"></span>
 </a>

https://jsfiddle.net/c2Ln1cab/4/

Upvotes: 0

Related Questions