einfach css anwenden Hintergrundfarbe nur auf Anker

Question

Ich möchte eine Hintergrundfarbe nur auf meine Anker-Tags und nicht auf die Schriftart-Symbol anwenden. Ich verschachtelte die < Spanne> weil ich brauche das Symbol auch anklickbar sein.

Wenn ich diese Spannweite fa-fa-angle-down-Klasse nehmen und es außerhalb des Ankers setzen, sieht alles gut aus (das ist, was ich will), aber es ist nicht anklickbar.

<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/

Answer 1

Warum nicht nur eine Spanne hinzufügen, was Sie auf den Gradienten wollen, und dann können Sie sowohl im Anker?

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>

Answer 2

Statt gebe den Anker-Tag, Styling, denken Sie an eine neue Klasse mit diesem Stil zu schaffen, und diese Klasse anwenden, wo immer erforderlich.

Auf diese Weise sind Sie nicht von Tags abhängig und beschränken nicht die Konstruktion (HTML) mit Stil (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/

Answer 3

Einfach die Spannweiten in den Anker, ein von dort aus arbeiten:

Beispiel:

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/