如何在之前或之后为内容添加样式？

Question

我想为客户端创建一个按钮：after和：before选择器。 来自内容的文字：“”是基本的。

div:after {"E-mail"} and div:hover:after {"exemple@exemple.com"}

我如何像普通文本一样设计内容文本？

Answer 1

通常，伪元素将继承父样式。 但是，如果需要，您可以像任何其他元素一样专门设置伪元素的样式：

请参阅解释关系的示例：

https://jsfiddle.net/svArtist/L9v24xwx/

＆＃13;

＆＃13;

div.styleme{
color:#f00;
font-size: 14pt;
font-family: Arial, sans-serif;
}

div span{
color:#00f;
font-size: 14pt;
font-family: Arial, sans-serif;
}

div:after{
content: "E-mail";
}

#defined:after{
color:#0f0;
font-size: 14pt;
font-family: Arial, sans-serif;
}

＆＃13;

<div class="styleme">Pseudo Element inheriting Style</div>
<div><span>Style only applied to &lt;SPAN&gt; tag</span></div>
<div id="defined">Style explicitly (re-)defined for Pseudo Element</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

div:after { 
    content: "E-mail";
} 

div:hover:after {
    content: "exemple@exemple.com";
}

<div></div>

你去了，请参考http://www.w3schools.com/cssref/sel_after.asp了解如何使用:after选择器。