如何设置部分伪元素内容的样式:"..."

Question

我在div伪元素中插入FontAwesome图标以及data属性中的一些文本:

<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

即使在你的情况下也是可能的.请在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>

但是,我认为这个解决方案有点hacky.我很可能会将图标和日期分开,并在可能的情况下将每个图标放入单独的HTML标记中.