是否可以将“:before”css 伪元素中的“内容”推出容器？

Question

是否可以在不添加更多类或包装器元素的情况下在 objectname 之后内联显示“and commented:”（显然，当有评论时）？我想让这个尽可能简单。我可以通过在评论中添加一个包装器来做到这一点，但这并不漂亮。

不工作：

.username, .objectname { font-weight:bold; }

    .objectname:before {content: "'"; }
    .objectname:after { content: "'"; }

    .comment { font-style: italic; display: block; margin: 3px 0px 3px 0px; background-color: pink; }
    .comment:before {content: "and commented:"; display:inline; background-color: purple;}

    .eventtime { display: block; background-color: yellowgreen;margin: 3px 0px 3px 0px; color: #A1A1A0; }
 <div class="item">
    <span class="username">Some Person</span>
    completed the task
    <span class="objectname">A Random Task</span>
    <span class="comment">silly comment silly comment silly comment silly comment silly comment silly comment silly</span>
    <span class="eventtime">Today @ 12:37PM</span>
</div>

工作：

        .username, .objectname { font-weight: bold; }
    .objectname:before {content: "'";}
    .objectname:after { content: "'"; }
    .comment { font-style: italic; display: block;margin: 3px 0px 3px 0px; background-color: pink;color: #919190;}
    .commentwrapper:before {content: "and commented:"; display:inline; background-color: purple;}
    .eventtime { display: block; background-color: yellowgreen;margin: 3px 0px 3px 0px; color: #A1A1A0; }
     <div id="item1" class="item">
    <span class="username">Some Person</span>
    completed the task
    <span class="objectname">A Random Task</span>
    <span class="commentwrapper">
        <span class="comment">silly comment silly comment silly comment silly comment silly comment silly comment silly comment silly comment silly comment silly comment silly comment silly comment</span>
    </span>
    <span class="eventtime">Today @ 12:37PM</span>
</div>

Answer 1

您将不能有两种不同的display 设置（inline 和block），一种用于父元素，一种用于伪元素（其行为类似于两个单独的元素）。但是您可以伪造它并将伪元素推到父元素之外并放到它上面的行（实际上，将注释推到它下面）。

诀窍是使用:before 插入换行符（\a）和white-space: pre 使其显示。然后将:after 用于“和评论”部分。将父级设置为position: relative;，将:after 设置为position: absolute。在父级上使用padding-left 为:after 腾出足够的空间，然后将:after 与left: 0 和top: 0 一起定位。

演示：

输出：

CSS：

.comment {
    background-color: pink;
    display: inline;
    font-style: italic;
    margin: 3px 0 3px 0;
    padding-left: 110px;
    position: relative;
}

.comment:after {
    background-color: purple;
    content: "and commented:";
    left: 0;
    padding-right: 4px;
    position: absolute;
    top: 0;
    white-space: nowrap;
}

.comment:before {
    content: '\a';
    white-space: pre;
}

Answer 2

如果在没有 cmets 的情况下不生成span，那么 CSS3 的解决方案如下：

See fiddle example。请注意，我必须从任务周围的单引号中删除粗体，否则它也会使“和评论”变为粗体。

.username, .objectname { font-weight: bold; }
.objectname:before {content: "'"; font-weight: normal;}
.objectname:after { content: "'"; font-weight: normal;}
.objectname:nth-last-child(3):after { /*<-- only targeted if a comment generated */
   content: "' and commented";
 } 
.comment { 
   font-style: italic; 
   display: block;
   margin: 3px 0px 3px 0px; 
   background-color: pink;
   color: #919190;
}
.eventtime { display: block; background-color: yellowgreen;margin: 3px 0px 3px 0px;

My orignial idea，现在是可选解决方案（请参阅下面的 cmets 了解更改原因）：

.objectname:nth-last-of-type(3):after { /*<-- only targeted if a comment generated */
   content: "' and commented";
 }