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

即使在你的情况下也是如此。请参阅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;
}

如何设置部分伪元素内容的样式：＆＃34; ...＆＃34;

2 个答案: