疑似要素を使って、線を適切な位置に表現したい。

Question

前提・実現したいこと

疑似要素を使って棒線を作成したが、配置に困っている。

発生している問題・エラーメッセージ

現在の表示

理想

該当のソースコード

<div class="view-more about-view-more"><a href="#" >私たちのこだわり</a></div>

.view-more a {
  position: relative;
}

.view-more a::before {
  content: '';
  display: inline-block;
  width: 80px;
  height: 1px;
  margin: 0 30px;
  background-color: #fff;
  vertical-align: middle;
}

.view-more a::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  border-bottom: 1px solid #fff;
}

試したこと

疑似要素after（下線部分）が文字だけにかかるようにしたいものの、方法が分かりません。
display: inline-block;等を指定するのか？などと考えてみましたが、できませんでした。
どうぞご教授いただけたらと思います。

Comments

[yambejp]

ご提示のソースを適用しても「現在の表示」にはならないのですが

[genjiro]

失礼しました。
.about-view-more {
　 text-align: right;
margin: 50px 30px 50px 20px;
}
が抜けておりました。

Answer 1

::beforeの幅が30px+80px+30pxで合計140pxとわかっているのだから、::afterを

  left: 140px;

とすれば良いのではないでしょうか。

Comments

[genjiro]

ありがとうございます。
言われてみれば簡単でした。
レベルの低い質問で、申し訳ありません。