Change fill color to a svg in a selector :: after

Question

Change fill color to a svg in a selector :: after

Navigation

#1 by (0 votes)

0

How can I change the fill attribute of svg by doing hover in element <a> ? As far as I have seen it can only be if the svg is explicitly declared, but I do not know if it is possible when it is in a selector ::after

.menuint-item {
    background: #444;
}
.menuint-item li a{
  color: #AAA !important;
  display: block;
  position:relative;
  text-decoration: none;
  font-family: "Oxygen";
  font-size: 13px;
  font-weight: 700;
}
.menuint-item li a:hover{
  color: #F9C017 !important;
}
.menuint-item li a::after {
    content: ' ';
    background-image: url('http://drive.google.com/uc?export=view&id=0B0we2ZlPETdKVnJONWNLUF9iODQ');
    float: right;
    background-size: 14px 14px;
    height: 14px;
    width: 14px;
}

<ul class="menuint-item">
  <li><a href="#">Programa</a></li>
  <li><a href="#">Programa</a></li>
  <li><a href="#">Programa</a></li>
  <li><a href="#">Programa</a></li>
</ul>

css svg

asked by Rene Limon 17.07.2017 в 20:07

source

1 answer

how to create switches with array and / or for in android studio Problems with the positioning of icons

score 0 · Accepted Answer

In the end I had to generate two identical svg files, the only difference being that I changed the% color_co, one white and one yellow, and in the fill I changed the file:

.menuint-item {
  background: #444;
}
.menuint-item li a{
  color: #AAA !important;
  display: block;
  position:relative;
  text-decoration: none;
  font-family: "Oxygen";
  font-size: 13px;
  font-weight: 700;
}
.menuint-item li a:hover{
  color: #F9C017 !important;
}
.menuint-item li a::after {
    content: ' ';
    background-image: url('http://drive.google.com/uc?export=view&id=0B0we2ZlPETdKVnJONWNLUF9iODQ');
    float: right;
    background-size: 14px 14px;
    height: 14px;
    width: 14px;
}

.menuint-item li a:hover::after {
    background-image: url('http://drive.google.com/uc?export=view&id=0B0we2ZlPETdKbnJLR0dwMEZrOGs');
}

<ul class="menuint-item">
  <li><a href="#">Programa</a></li>
  <li><a href="#">Programa</a></li>
  <li><a href="#">Programa</a></li>
  <li><a href="#">Programa</a></li>
</ul>