title: HTML, CSS, link element's clickability range is too wide
body: <p>I am trying to add a simple link to the bottom right corner of my posts element:</p>
  <p><a href="https://i.stack.imgur.com/BO88r.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BO88r.png" alt="enter image description here" /></a></p>
  <p>Unfortunately, the entire bottom portion of this is clickable, which is not what I want. I just want the text &quot;Link&quot; to be clickable.</p>
  <p>Code is below:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div class=&quot;single-post shadow-sm&quot;&gt;
      &lt;div class=&quot;d-flex align-items-center justify-content-between&quot;&gt;
          &lt;div class=&quot;d-flex align-items-center&quot;&gt;
              &lt;p class=&quot;poster&quot;&gt;PosterName&lt;/p&gt;
              &lt;span class=&quot;mx-1&quot;&gt;|&lt;/span&gt;
              &lt;p class=&quot;category&quot;&gt;Category1&lt;/p&gt;
              &lt;span class=&quot;mx-1&quot;&gt;|&lt;/span&gt;
              &lt;p class=&quot;date_time&quot;&gt;(date)&lt;/p&gt;
          &lt;/div&gt;
          &lt;p class=&quot;dynamic-text&quot;&gt;small_dynamic_text&lt;/p&gt;
      &lt;/div&gt;
      &lt;p class=&quot;post-details&quot;&gt;
          &lt;span class=&quot;post-description&quot;&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam error corporis, eaque harum commodi at officiis velit aspernatur sapiente voluptatem praesentium inventore, in autem suscipit adipisci quis. Ut aliquam laboriosam qui quos harum excepturi, ex officiis illum laudantium minus deleniti odio fugiat delectus corporis magnam rerum eligendi! Minus, exercitationem voluptas?&lt;/span&gt;
          &lt;span class=&quot;toggle-details&quot;&gt;
              &lt;span class=&quot;show-more&quot;&gt; show more&lt;/span&gt;
              &lt;span class=&quot;show-less&quot;&gt; show less&lt;/span&gt;
          &lt;/span&gt;
          &lt;a href=&quot;#&quot; class=&quot;link-text&quot;&gt;Link&lt;/a&gt;
      &lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  <p>This HTML already exists and I am just trying to insert the <code>&lt;a&gt;</code> element with class <code>link-text</code> which I've created below:</p>
  <pre class="lang-css prettyprint-override"><code>main .posts-content .posts .single-post .link-text {
      font-size: 12px;
      color: #25aa7e;
      font-weight: 600;
      text-align: right;
      display: block;
      margin-bottom: -10px;
  }    
  </code></pre>
  <h2>Edit</h2>
  <p><a href="https://i.stack.imgur.com/Ll0EB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Ll0EB.png" alt="enter image description here" /></a></p>
  <p>This is the result with <code>display:inline-block; width:auto; </code> which is not exactly what I want because now Link is not right-aligned.</p>