如何设置部分伪元素内容的样式：“...”

Question

我在 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/

现在我想要的是增加图标的大小，并在其下方留出一定的空白放置文本。虽然将文本内容放在图标下方似乎是可以实现的（如果我固定伪元素的宽度），但我想不出在不增加文本内容大小的情况下增加图标大小的方法。有任何想法吗？

Answer 1

即使在你的情况下也是可能的。请参阅 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 标签中。

Answer 2

你可以使用另一个伪元素：

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;
}

如何设置部分伪元素内容的样式：“...”

How do I style part of the pseudo element content: "..."

html

css

font-awesome