是否有可能将“内容”从“：before”css伪元素推出容器？

Question

是否有可能使“和注释：”出现（当显示注释时，显然）在objectname之后内联而不添加更多类或包装元素？我想保持尽可能简单。我可以通过在评论中添加一个包装器来实现它，但它并不漂亮。

不工作：

.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>

WORKING：

        .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

如果在没有评论时没有生成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，现在是可选的解决方案（请参阅下面的评论，了解更改的原因）：

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