Is it possible to click "contents" from the pseudo-element ": before" css from the container?

Question

Is it possible to do "and commented:" (when there is a comment, obviously) inline after objectname without adding additional classes or shell elements? I would like to make it as simple as possible. I can do this by adding a wrapper to the comment, but that's not very much.

DOES NOT WORK:

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

WORKERS:

  .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

You will not have two different display settings ( inline and block ), one for the parent and one for the pseudo-element (which will behave as two separate elements). But you can fake it and click the pseudo-element outside the parent and on the line above it (well, actually, click the comment below).

The trick is to use :before to insert a new line ( \a ) and white-space: pre so that it appears. Then use :after for the "and commented out" part. Set the parent element position: relative; and :after to position: absolute . Use padding-left for the parent to make enough space for :after , and then put :after with left: 0 and top: 0 .

Demo: _{sub> sub>}

Output:

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

If you don't create a span when there are no comments, then the CSS3 solution looks like this:

See an example script . Notice that I had to remove the bold from the single quotes around the task, otherwise it would also make the "and comment" bold.

 .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 own idea , now this is an optional solution (see comments below why the change):

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