ここでは、input要素でボタンに擬似要素を適用させたい方が参考になりそうなお話をします。結論から言うと、input要素に疑似要素は適用できません。

例えば、リンクタグならこういうデザインが素直に作れるわけですが（疑似要素で右に矢印を入れています）。

See the Pen button01 by kenichi (@ken81) on CodePen.

HTML

<a href="#" class="button">申込み</a>

CSS

a.button {
  display: block;
  margin:0 auto;
  text-decoration: none;
  border: none;
  outline: 0;
  cursor: pointer;
  color: #fff;
  background: #555;
  font-weight: bold;
  position: relative;
  height: 3.0em;
  line-height: 3.0em;
  width: 100px;
  padding: 0 0.8em 0 1.2em;
  transition: 0.5s;
}
a.button::after{
  transition: 0.5s;
  content: "";
  width: .6em;
  height: .6em;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  position: absolute;
  top: -2px;
  bottom: 0;
  right: 20px;
  margin: auto;
  -webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}
a.button:hover::after{
  right: 12px;
}
a.button:hover {
  background: #134767;
}

input要素をボタンにしたものでは同じように行きません。

See the Pen button02 by kenichi (@ken81) on CodePen.

HTML

<input type="submit" value="申込み"></div>

CSS

input[type="submit"]{
  display: block;
  margin:0 auto;
  text-decoration: none;
  border: none;
  outline: 0;
  cursor: pointer;
  color: #fff;
  background: #555;
  font-weight: bold;
  position: relative;
  height: 3.0em;
  line-height: 3.0em;
  width: 100px;
  padding: 0 0.8em 0 1.2em;
  transition: 0.5s;
}
input[type="submit"]::after{
  transition: 0.5s;
  content: "";
  width: .6em;
  height: .6em;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  position: absolute;
  top: -2px;
  bottom: 0;
  right: 20px;
  margin: auto;
  -webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}
input[type="submit"]:hover::after{
  right: 12px;
}
input[type="submit"]:hover {
  background: #134767;
}

上記は、inputタグに同じスタイルシートを適用させた例です。

input要素は置換要素といって少し特殊な要素のため疑似要素が効きません。でも、お問合せフォームなどで送信ボタンがinput要素になっている場合はどうしたらよいでしょうか。そういうときは、次のようにします。

See the Pen button03 by kenichi (@ken81) on CodePen.

HTML

<div class="button_wrap"><input type="submit" value="申込み"></div></div>

CSS

input[type="submit"]{
  font-size: 1.0em;
  display: block;
  border: none;
  outline: 0;
  cursor: pointer;
  color: #fff;
  background: #555;
  font-weight: bold;
  height: 3.0em;
  line-height: 3.0em;
  width: 100%;
  padding: 0 2.5em 0 0.8em;
  transition: 0.3s;
}
.button_wrap{
  color: #fff;
  position: relative;
  line-height: 2.8em;
  width: 130px;
  transition: 0.5s;
  margin:0 auto;
}
.button_wrap::after{
  transition: 0.3s;
  content: "";
  width: .6em;
  height: .6em;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 20px;
  margin: auto;
  -webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}
.button_wrap:hover::after{
  right: 12px;
}
input[type="submit"]:hover {
  background: #134767;
}

ポイントはinput要素をdivでラップすることです。

どうしてもinput要素に疑似要素を入れたい場合は、inputをdiv要素などでラップして、それに対してにスタイルシートを組みます。これで、実装できました。