4

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

不工作：

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

2 回答 2

1

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

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

演示： jsFiddle

输出：

在此处输入图像描述

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;
}
于 2013-02-21T19:19:55.660 回答
0

如果span没有评论时不生成a，那么CSS3的解决方案如下：

请参阅小提琴示例。请注意，我必须从任务周围的单引号中删除粗体，否则它也会使“和评论”变为粗体。

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

我最初的想法，现在是可选解决方案（请参阅下面的评论了解更改的原因）：

.objectname:nth-last-of-type(3):after { /*<-- only targeted if a comment generated */
   content: "' and commented";
 }
于 2013-02-21T19:28:58.183 回答