在div之前和之前添加文本

Question

如何在div元素之前和之后添加文本？我尝试使用伪选择器before和after，但它不起作用。

.volume-container:before {
    content: 'Storage';
}

.volume-container:after {
    content: '25% Usage';
}

我想在音量控制之前和之后添加一个文本，就像伪选择器工作的存储控件一样。

http://codepen.io/anon/pen/jrynu

Answer 1

::before和::after并非旨在实际插入元素but inside, as the first and last children的外内容。

但是，将笔更改为实际使用.volume-container:before和.volume-container:after，your content is visible。你是否希望它在视觉上看起来是另一个问题，但我想我上面的解释可能表明它为什么没有按预期工作。