How Do You Make "0 Comments" Appear On The Bottom, Relative To The Timestamp's Position, *without* Editing The Html?

I tried achieving positioning the Comments span next to the timestamp via Absolute positioning, but that approach was bad because it would end up in a different place depending on

Solution 1:

You can remove the element and reposition it after the p.entry-byline section, or as the bottom of the entire entry if you want.

First you detach it from its parent then you can append it to the desired target.

[...document.querySelectorAll('.entry-body')].forEach(entryBody => {
  moveElement(
    entryBody.querySelector('p.entry-stats span.entry-comments-link a'),
    entryBody.querySelector('p.entry-byline')
  );
});

/**
 * Moves an element by detaching it from its parent and appending it to
 * a target.
 * @param {HTMLElement|String} ref - Element to detach and move
 * @param {HTMLElement|String} target - Element where ref will be appended
 * @return Returns the element that was moved
 */functionmoveElement(ref, target) {
  if (typeof target === 'string') target = document.querySelector(target);
  target.appendChild(detatchElement(ref));
  return ref;
}

/**
 * Detaches an element from its parent.
 * @param {HTMLElement|String} ref - Element to detach from its parent
 * @return Returns the detached element
 */functiondetatchElement(ref) {
  if (typeof ref === 'string') ref = document.querySelector(ref);
  return ref.parentElement.removeChild(ref);
}

<divclass="entry-body"><headerclass="entry-header"><divclass="entry-before-title"><pclass="entry-meta entry-stats g1-meta g1-meta g1-current-background"><spanclass="entry-views "><strong>30.4k</strong><span> Views</span></span><spanclass="entry-comments-link entry-comments-link-0"><ahref="https://example.com/2017/12/10/25-delicious-things-to-cook-in-september/#respond"><strong>0</strong><span>Comments</span></a></span></p><spanclass="entry-categories "><spanclass="entry-categories-inner"><spanclass="entry-categories-label">in</span><ahref="https://example.com/category/bimber-food/"class="entry-category entry-category-item-21">Food</a></span></span></div><h3class="g1-delta g1-delta-1st entry-title"><ahref="https://example.com/2017/12/10/25-delicious-things-to-cook-in-september/"rel="bookmark">25 Delicious Things To Cook In September</a></h3></header><divclass="entry-summary"><p> Consectetur quis, elementum eu arcu. Nunc ornare arcu lacus, quis aliquet odio bibendum non. Nam vitae libero mauris. Suspendisse vitae purus ligula. Morbi sed diam eget dolor posuere convallis vel vel nisl. Nulla sagittis efficitur ex, at sodales
      massa pulvinar a. Nunc quis lacinia eros. Fusce ac ipsum gravida, tristique sed felis augue dictum nec. </p></div><footer><pclass="g1-meta entry-meta entry-byline entry-byline-s entry-byline-with-avatar"><spanclass="entry-author"><spanclass="entry-meta-label">by</span><ahref="https://example.com/author/admin/"title="Posts by admin"rel="author"><imgdata-expand="600"alt=''src='data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg ' viewBox%3D'002424 '%2F%3E' data-src='https://secure.gravatar.com/avatar/9f221658beaba2ee853f978fa48f49c2?s=24&#038;d=mm&#038;r=g'data-srcset='https://secure.gravatar.com/avatar/9f221658beaba2ee853f978fa48f49c2?s=48&#038;d=mm&#038;r=g 2x'class='lazyload avatar avatar-24 photo'height='24'width='24' /><strong>admin</strong></a></span><timeclass="entry-date"datetime="2017-12-10T11:52:51+00:00">December 10, 2017, 11:52 am</time></p></footer><divclass="entry-todome g1-dropable snax"><divclass="snax-voting snax-voting-positive snax-voting-xs"data-snax-item-id="297"><divclass="snax-voting-score"><strong>6200</strong> points
      </div><ahref="#"class="snax-voting-upvote snax-vote snax-vote-up snax-guest-voting"title="Upvote"data-snax-item-id="297"data-snax-author-id="0"data-snax-nonce="58b09e0f01"><spanclass="snax-vote-icon snax-vote-icon-caret"></span>Upvote</a><ahref="#"class="snax-voting-downvote snax-vote snax-vote-down snax-guest-voting"title="Downvote"data-snax-item-id="297"data-snax-author-id="0"data-snax-nonce="58b09e0f01"><spanclass="snax-vote-icon snax-vote-icon-caret"></span>Downvote
      </a></div></div></div>

Solution 2:

https://codepen.io/pen/?editors=1100 how about using position: absolute from the bottom? is the bottom content dynamic too?

.entry-comments-link entry-comments-link-0 {
position: absolute;
  bottom: 53px;
  left: 270px;
}

.entry-body {
  position: relative;
}enter code here`

Solution 3:

I haven't used WordPress before so I'm not sure where you can enter JS but provided there is only the one <time> tag you could use the following:

var elem = document.createElement('a');
var linkText = document.createTextNode("\t 0 Comments");
elem.appendChild(linkText);
elem.title = "Comments";
elem.href = "http://yourlinkhere.com";
var timeElem = document.getElementsByTagName("time")[0];
timeElem.parentNode.insertBefore(elem, timeElem.nextSibling);