CSS 要素の前後に文字列を挿入する

本ブログの記事の下に 次のページ、前のページへのリンクが表示されているのですが、ここに、どちらが次でどちらが前なのかを明示しました。

表示例。記事へのリンクの前に【<<次の記事】【前の記事>>】を挿入しています。

HTMLを見ていきます。

HTMLには手を加えません。

  <div class="pager pager-permalink permalink">
      <span class="pager-prev">
        <a href="https://www.mypath-as-variant.com/entry/2022/05/09/220302" rel="prev">
          <span class="pager-arrow">&laquo; </span>
          「英文読解入門 基本はここだ！」を読み始…
        </a>
      </span>  
    
      <span class="pager-next">
        <a href="https://www.mypath-as-variant.com/entry/2022/05/07/215449" rel="next">
          本日休みます
          <span class="pager-arrow"> &raquo;</span>
        </a>
      </span>
  </div>

ここで注目するのは以下の部分です。

・ <span class="pager-prev">  次の記事(翌日分)。
・ <span class="pager-next">  前の記事(前日分)。

何か逆のような気がするのですが、要素の値がこの通りなので・・・

CSSの設定を変更することで、それぞれの要素の直前に文字列【<<次の記事】【前の記事>>】を挿入します。

CSSで、以下のコードを追加することにより文字列を挿入します。

要素名:before { content: "文字列"}  要素の直前に文字列を挿入する

要素名:after { content: "文字列"} 要素の直後に文字列を挿入する

span.pager-prev:before { content: "【<< 次の記事】" }
span.pager-next:before { content: "【前の記事 >>】" }

今回は、次のページ、前のページともに要素の直前に入れるため、before を指定しています。

以上です。