CSS - Треугольник вниз

Question

Как создать стрелку вниз (треугольник) при наведении курсора на ссылку?

что-то вроде вкладки результата на CodePen см here

Я пытался создать треугольник, следуя учебник выше, но не повезло

a{ 
    background: red; 
    float: left; 
    width: 30%; 
    padding: 5px; 
    display block 
    } 

    a:hover {background: green;} 

Answer 1

Я не уверен, что вы имеете в виду , но это может быть ответом:

CSS:

.arrow_down_on_hover{ 
    position: relative; 
} 
.arrow_down_on_hover:before{ 
    content: ""; 
    width: 0; 
    height: 0; 
    border-left: 20px solid transparent; 
    border-right: 20px solid transparent; 
    display: none; 
    border-top: 20px solid #f00; 
    position: absolute; 
    right: 50%; 
    margin-right: -10px; 
    bottom: -20px; 
} 
.arrow_down_on_hover:hover:before{ 
    display: block; 
} 

HTML:

<a class="arrow_down_on_hover" href="#!">hover me</a> 

пример:

http://codepen.io/eboye/pen/zBYzav

Answer 2

код ниже, это просто следуя учебник вы связаны в вашем вопросе,

, но так как вы используете ссылку a вы необходимо сделать это как уровень блока, установив его display:block из-за встроенного элемента

a { 
 
    width: 0; 
 
    height: 0; 
 
    border-left: 20px solid transparent; 
 
    border-right: 20px solid transparent; 
 
    border-top: 20px solid transparent; 
 
    display:block 
 
} 
 
a:hover { 
 
    border-top: 20px solid green 
 
}

<a href="">Hover me</a>

---

Если это просто вопрос показать/скрыть треугольник при наведении некоторые ссылки, лучший подход будет использовать псевдо элементы ::before/::after вместе с Юникода символ стрелки вниз

a:hover::after { 
 
    content: "\25bc"; 
 
    color: green 
 
}

<a href="">Hover me</a>

Answer 3

a:hover .arrow-down { 
 
    width: 0; 
 
    height: 0; 
 
    border-left: 20px solid transparent; 
 
    border-right: 20px solid transparent; 
 
    
 
    border-top: 20px solid #f00; 
 
}

<a>link<div class="arrow-down"></div></a>

Answer 4

Может быть, вы можете просто использовать the arrow down symbol:

a::after { 
 
    content: '\25bc'; 
 
    color: red; 
 
} 
 

 
a:hover::after { 
 
    color: green; 
 
}

<a>Hover me!</a>

Вы также можете указать один и тот же символ в HTML вместо CSS, используя объект: ▼.