CSS «содержание» функция не показывает

Question

У меня есть две кнопки (каждая из них имеет повернутый DIV внутри, чтобы создать треугольник на нижней и верхней части страницы)

<button id="arrow-up"> 
    <div id="rotate-up"></div> 
</button> 
<button id="arrow-down"> 
    <div id="rotate-down"></div> 
</button> 

Css

#arrow-down, #arrow-up { 
    display: block; 
    position: absolute; 
    z-index: 200; 
    width: 80px; height: 55px; 
} 

#rotate-down, #rotate-up { 
    border:none; 
    position: relative; 
    height: 100%; width: 100%; 
    transform-origin: center left; 
    background-color: #fff; 
    margin-left: 20px; 
} 

#rotate-down { 
    border-bottom:none; 
    transform:rotate(45deg); 
} 

#rotate-up { 
    border-top:none; 
    transform:rotate(-45deg); 
} 

Я хочу добавьте черный шеврон, указывающий вверх/вниз в каждой кнопке. Я хотел использовать CSS

content: "/..."; 

избежать добавления каких-либо дополнительных дивы, чтобы сохранить его простым, но я не могу получить его, чтобы показать на мои кнопки, несмотря на, где я поставил его (я проверил это только с письмом) ,

Answer 1

Свойство содержимого является исключительным для селекторов :: after (: after) и :: before (: before).

#yourElement:before { 
    content: "your content"; 
}