[Web]テキストリンクの中にボタンを埋め込んでみた。

<div class="container">
  <p>テキストリンク末尾のアイコンをクリックするとURLを表示します。</p>
  <p class="paragraph">
    <a class="js-link pdf-link" href="https://na.sandt-web.com/temp/codepen/20230317/test.pdf" target="_blank">テキストリンク</a>
  </p>
</div>

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.container {
  margin: 0 auto;
  width: 768px;
}

.paragraph {
  width: 400px;
}

.pdf-link {
  position: relative;
}

.pdf-link:after {
  content: "";
  background: url(https://na.sandt-web.com/temp/codepen/20230317/icon_pdf.png) no-repeat center center;
  background-size: contain;
  border: 1px solid #00f;
  border-radius: 10%;
  display: inline-block;
  height: 1em;
  width: 2em;
}

.link-btn {
  background: rgba(212, 255, 255, .3);
  border: 1px solid rgb(212, 255, 255);
  /* bottom: 0; */
  cursor: pointer;
  display: inline-block;
  height: 1.6em;
  position: absolute;
  /* right: 0; */
  width: 2.5em;
}

$(function () {
  $('a[href$="pdf"]').append('<button class="js-btn link-btn"></button>')
  $('.js-link:after').on('click', function (e) {
    e.preventDefault();
    let linkUrl = $(this).attr('href');
    window.alert('リンクURLは → '+ linkUrl);
    return false;
  });
});