символов Использование Unicode в меню Вместо графических

Question

Я пытаюсь выяснить способ использовать этот Юникода символ ▼ вместо крошечного GIF графики в этом меню ...

Я знаю, Мне нужно использовать что-то вроде:

#nav a:hover:after { 
    content: "▼"; 
    color: #fff; 
    } 

Но это просто отображает встроенный юникод символов после каждого пункта меню, как это ...

Я не могу понять, как сделать символ Юникода центрированным по каждому элементу меню, как я мог сделать с графикой. Это возможно? Благодаря!

Answer 1

Вы можете сделать что-то подобное,

#nav a { 
    position: relative; 
    overflow: hidden; 
} 

#nav a:hover:before { 
    content: "▼"; 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    margin: auto; 
    text-align: center; 
} 

Смотрите пример:

https://jsfiddle.net/njqd7gnp/2/

Answer 2

как о добавлении формы после того, как сам текст <li>about &#9660</li> Тогда в CSS, вы делаете visibility:hidden; и появляются, когда :hover с помощью visibility:visible;

Подробнее о видимости, если вы не уверены, http://www.w3schools.com/cssref/pr_class_visibility.asp

Answer 3

Give position:absolute на символ юникода и отрегулируйте верхнее и левое положение.

Попробуйте это:

#nav a{ 
    position:relative; 
} 
#nav a:hover::after { 
    color: #fff; 
    content: "▼"; 
    left: 50%; 
    margin-left: -6px; 
    position: absolute; 
    top: -4px; 
}