/*-------------------------------------------------------------------------------------------

REFINE CUSTOM STYLESHEET

スタイルシートをカスタマイズする場合は、style.cssを編集する代わりにこちらに
記述してください。そうすることで、テンプレートがアップデートされた場合でも、
このページをコピー＆ペーストするだけで、簡単に新バージョンのテンプレートに、
自分のカスタムを反映させることができます。

-------------------------------------------------------------------------------------------*/
<?php
$args = array(
    'before'      => '<p class="page-page">',
    'after'       => '</p>
<style>
.page-page {
  width: 100%;
  text-align: center;
  margin: 80px 0 10px;
}
.page-page span {
  padding: 7px 10px;
  font-size: 15px;
  background: #fff;
  position: relative;
  box-shadow: 0 0 1px 2px #76abff inset;
}
.page-page span:before {
  content:"NOW";
  position: absolute;
  top: -120%;
  left: 0; /*追加しました*/
  width: 100%;
  display: block;
  text-align: center;
  background: #76abff;
  padding: 5px 0;
  border-radius: 7px;
  color: #fff;
  font-size: 12px;
  font-weight: bold;
}
.page-page span:after {
  content:"";
  top: -50%;
  border: 8px solid transparent;
  border-top-color: #76abff;
  position: absolute;
  left: 50%;
  margin-left: -8px;
  border: ;
}
.page-page a {
  text-decoration: none;
}
.page-page a span {
  background: #76abff;
  color: #000;
  padding: 7px 10px;
  color: #fff;
  box-shadow: none;
  font-weight: bold;
}
.page-page a span:before {
  content:"";
  padding: 0;
}
.page-page a span:after {
  border: none;
}
/* 追加しました */
.page-page span {
  opacity : 0.8;
}
</style>', 
    'link_before' => '<span>',
    'link_after'  => '</span>',
    'pagelink'    => 'PAGE %',
);
wp_link_pages( $args );
?>