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
 */
function moveElement(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
 */
function detatchElement(ref) {
  if (typeof ref === 'string') ref = document.querySelector(ref);
  return ref.parentElement.removeChild(ref);
}

<div class="entry-body">
  <header class="entry-header">
    <div class="entry-before-title">
      <p class="entry-meta entry-stats g1-meta g1-meta g1-current-background">
        <span class="entry-views ">
          <strong>30.4k</strong>
          <span> Views</span>
        </span>
        <span class="entry-comments-link entry-comments-link-0">
          <a href="https://example.com/2017/12/10/25-delicious-things-to-cook-in-september/#respond">
            <strong>0</strong>
            <span>Comments</span>
          </a>
        </span>
      </p>
      <span class="entry-categories "><span class="entry-categories-inner"><span class="entry-categories-label">in</span> <a href="https://example.com/category/bimber-food/" class="entry-category entry-category-item-21">Food</a></span>
      </span>
    </div>
    <h3 class="g1-delta g1-delta-1st entry-title"><a href="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>
  <div class="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>
    <p class="g1-meta entry-meta entry-byline entry-byline-s entry-byline-with-avatar">
      <span class="entry-author">
            <span class="entry-meta-label">by</span>
        <a href="https://example.com/author/admin/" title="Posts by admin" rel="author">
        <img data-expand="600" alt='' src='data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D' http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg ' viewBox%3D'0 0 24 24 '%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>
      <time class="entry-date" datetime="2017-12-10T11:52:51+00:00">December 10, 2017, 11:52 am</time> </p>
  </footer>
  <div class="entry-todome g1-dropable snax">
    <div class="snax-voting snax-voting-positive snax-voting-xs" data-snax-item-id="297">
      <div class="snax-voting-score">
        <strong>6200</strong> points
      </div>
      <a href="#" 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"><span class="snax-vote-icon snax-vote-icon-caret"></span>Upvote</a>
      <a href="#" 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">          <span class="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);