CODEWITHSUNDEEP
htmlcsspseudo-element
Rob
Rob

Reputation: 209

Is it possible to push the "content" from a ":before" css pseudo-element out of container?

Is it possible to make the "and commented:" appear (when there's a comment, obviously) inline after objectname without adding more classes or wrapper elements? I'd like to keep this as simple as possible. I can do it by adding a wrapper to the comment but it's not pretty.

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

Upvotes: 4

Views: 2923

Answers (2)

ThinkingStiff
ThinkingStiff

Reputation: 65341

You won't be able to have two different display settings (inline and block), one for the parent and one for the pseudo-element (that will behave like two separate elements). But you can fake it and push the pseudo-element outside of the parent and onto the line above it (well actually, push the comment below it).

The trick is to use :before to insert a newline (\a) and white-space: pre to make it show. Then use :after for the "and commented" part. Set the parent to position: relative; and :after to position: absolute. Use padding-left on the parent to make enough room for :after and then position :after with left: 0 and top: 0.

Demo: jsFiddle

Output:

enter image description here

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

Upvotes: 1

ScottS
ScottS

Reputation: 72261

If you do NOT generate a span when there is no comments, then a CSS3 solution is as follows:

See fiddle example. Note, I had to remove the bold from the single quotes around the task, else it made the "and commented" bold also.

.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, now the optional solution (see comments below for why the change):

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

Upvotes: 0

Related Questions