css - 用于标记多个类的多个 CSS 内容

Question

我正在尝试将具有 CSS content 值的图标添加到不同的类。某些标记可​​能有多个类，在这种情况下，我希望文本后有多个图标。问题是，我不确定是否可以将多个 content 值添加到同一个类。

例子:

.entry-header::after {font-family: FontAwesome; font-size: 15px; /*float: right;*/}

.status-private > .entry-header::after {
    content: " \f023"
}
.format-standard > .entry-header::after {
    content: " \f040"
}
.format-video > .entry-header::after {
    content: " \f03d"
}

在类的情况下，例如.status-private 将显示 Logo ，但如果标记有两个 类怎么办？比如.status-private .format-standard？我怎样才能显示两个图标？

如果可能的话，我会避免为这三个类的所有可能组合制作 CSS。

我当前的标记:

<article id="post-1713" class="post-1713 post type-post status-private format-video hentry category-uncategorized post_format-post-format-video">
    <header class="entry-header">

        <div class="entry-date">
            May 20, 2016
        </div>

        <div class="entry-title post-1713 post type-post status-private format-video hentry category-uncategorized post_format-post-format-video">
            Private: Private: This is a video post
        </div>

    </header><!-- .entry-header -->

    <div class="entry-content" data-did-load="true" style="display: none;">
        <p>
            The format of this post is video, but the video has not yet been added
        </p>
    </div><!-- .entry-content -->
</article>

我想在 Private: This is a video post 之后显示图标

Answer 1

同一元素上不能有多个伪元素。即使您可以，如原始答案中所述，仅使用 ::after::after 也无法帮助您避免重复。

这是我更喜欢实用性而不是纯粹性的地方。我只是为每个 CSS classes 的每个状态添加一个空的 span，并在 CSS 中仍然使用 ::after 定位这些> 等等

更新 1:示例:

.entry-header > .icon::after {font-family: FontAwesome; font-size: 15px; /*float: right;*/}

.entry-header > .icon-status-private::after {
    content: " \f023"
}

.entry-header > .icon-format-standard::after {
    content: " \f040"
}
.entry-header > .icon-format-video::after {
    content: " \f03d"
}

<!-- To show icons -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />


<div class="status-private">
  <div class="entry-header">
    <span class="icon icon-status-private"></span>
    Private
  </div>
</div>

<div class="status-private">
  <div class="entry-header">
    <span class="icon icon-status-private"></span>
    <span class="icon icon-format-standard"></span>
    Private Article
  </div>
</div>

<div class="status-private">
  <div class="entry-header">
    <span class="icon icon-status-private"></span>
    <span class="icon icon-format-standard"></span>
    <span class="icon icon-format-video"></span>
    Private Video Article
  </div>
</div>

Note: You can change the .icon in the first CSS line to [class=*'icon-'], and remove the redundant icon class from the spans.

如果您使用某种编程语言(服务器端或 JavaScript)，您可以使用一些编程检查来决定在 HTML 中编写每个 span。

更新 2:避免 HTML 更改

如果您真的必须保持 HTML 原样。恐怕你必须复制选择器。

在您的特定情况下，实际上并不算太糟糕。这是您更新后的问题 HTML 中的完整示例:

.entry-header::after {
  font-family: FontAwesome;
  font-size: 15px; 
  float: right;
}

.format-standard > .entry-header::after {
    content: " \f040";
}
.status-private.format-standard > .entry-header::after {
    /*Had to put 2 spaces to make the icons separate */
    content: " \f023  \f040";
}

.format-video > .entry-header::after {
    content: " \f03d";
}
.status-private.format-video > .entry-header::after {
    /*Had to put 2 spaces to make the icons separate */
    content: " \f023  \f03d";
}

/* Might not be needed now */
.status-private > .entry-header::after {
    content: " \f023";
}

<!-- To show icons -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />


<article id="post-1713" class="post-1713 post type-post status-private format-video hentry category-uncategorized post_format-post-format-video">
    <header class="entry-header">

        <div class="entry-date">
            May 20, 2016
        </div>

        <div class="entry-title post-1713 post type-post status-private format-video hentry category-uncategorized post_format-post-format-video">
            Private: Private: This is a video post
        </div>

    </header><!-- .entry-header -->

    <div class="entry-content" data-did-load="true" style="display: none;">
        <p>
            The format of this post is video, but the video has not yet been added
        </p>
    </div><!-- .entry-content -->
</article>