4

クラスやラッパー要素を追加せずに、「and commented:」を 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>

働く：

        .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

display2つの異なる設定（inlineおよび）を使用することはできませんblock。1つは親用で、もう1つは疑似要素用です（2つの別個の要素のように動作します）。しかし、それを偽造して、親の外側のその上の行に疑似要素をプッシュすることができます（実際には、その下のコメントをプッシュします）。

秘訣は:before、改行（\a）を挿入white-space: preして表示させるために使用することです。次に:after、「コメント付き」の部分に使用します。親をposition: relative;と:afterに設定しposition: absoluteます。padding-left親に使用して十分なスペースを確保し、とで:after配置:afterします。left: 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コメントがないときに を生成しない場合、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 に答える