如何设置部分伪元素内容的样式:“...”
How do I style part of the pseudo element content: "..."
我在 div 伪元素中插入一个 FontAwesome 图标以及数据属性中的一些文本:
<div data-date="Mar 01, 2016"></div>
div:before {
content: "\f073" attr(data-date);
font-family: "FontAwesome", sans-serif;
}
https://jsfiddle.net/cn0vhns9/
现在我想要的是增加图标的大小,并在其下方留出一定的空白放置文本。虽然将文本内容放在图标下方似乎是可以实现的(如果我固定伪元素的宽度),但我想不出在不增加文本内容大小的情况下增加图标大小的方法。有任何想法吗?
即使在你的情况下也是可能的。请参阅 updated fiddle at https://jsfiddle.net/cn0vhns9/3/。您必须将图标样式设置为伪元素(::first-letter
,或者出于兼容性原因,:first-letter
仅使用一个分号)。
我的回答只是演示了不同字体大小的问题。
CSS
div:before {
content: "\f073" attr(data-date);
font-family: "FontAwesome", sans-serif;
padding: 20px;
color: black;
font-size: 20px;
}
div::first-letter {
font-size: 40px;
font-family: "FontAwesome", sans-serif;
}
HTML
<div data-date="Mar 01, 2016">
</div>
但是,我认为这个解决方案有点老套。如果可能的话,我很可能会将图标和日期分开,并将它们分别放入一个单独的 HTML 标签中。
你可以使用另一个伪元素:
div:before {
content: "\f073" ;
font-family: "FontAwesome", sans-serif;
padding: 20px;
color: black;
font-size:2em;
}
div:after
{
content:attr(data-date);
display:block;
border-top:1px solid black;
}
我在 div 伪元素中插入一个 FontAwesome 图标以及数据属性中的一些文本:
<div data-date="Mar 01, 2016"></div>
div:before {
content: "\f073" attr(data-date);
font-family: "FontAwesome", sans-serif;
}
https://jsfiddle.net/cn0vhns9/
现在我想要的是增加图标的大小,并在其下方留出一定的空白放置文本。虽然将文本内容放在图标下方似乎是可以实现的(如果我固定伪元素的宽度),但我想不出在不增加文本内容大小的情况下增加图标大小的方法。有任何想法吗?
即使在你的情况下也是可能的。请参阅 updated fiddle at https://jsfiddle.net/cn0vhns9/3/。您必须将图标样式设置为伪元素(::first-letter
,或者出于兼容性原因,:first-letter
仅使用一个分号)。
我的回答只是演示了不同字体大小的问题。
CSS
div:before {
content: "\f073" attr(data-date);
font-family: "FontAwesome", sans-serif;
padding: 20px;
color: black;
font-size: 20px;
}
div::first-letter {
font-size: 40px;
font-family: "FontAwesome", sans-serif;
}
HTML
<div data-date="Mar 01, 2016">
</div>
但是,我认为这个解决方案有点老套。如果可能的话,我很可能会将图标和日期分开,并将它们分别放入一个单独的 HTML 标签中。
你可以使用另一个伪元素:
div:before {
content: "\f073" ;
font-family: "FontAwesome", sans-serif;
padding: 20px;
color: black;
font-size:2em;
}
div:after
{
content:attr(data-date);
display:block;
border-top:1px solid black;
}