<div class="container">
  <p><a href="https://ja.wikipedia.org/wiki/東京">Wikipediaより</a></p>

  <hr class="hr-text" data-content="東京">
  <p>東京(とうきょう、英語: Tokyo)は、日本の関東平野中央部の東京湾に面する地域、もしくは同域に存在する世界都市である。都市圏として世界最大の人口・経済力を擁しており、現在の日本の事実上の首都である。江戸幕府の所在地・江戸が慶応4年7月(1868年9月)に「東京」に名称変更された。都が京都から明治2年3月28日に「東京」に遷されている。</p>
  </div>
<div class="container">
   <hr class="hr-text" data-content="概要・沿革">
  
   <p>1868年に江戸(江戸幕府の所在地)から名称変更された。東京奠都を経て、現在では事実上の首都機能を担っている都市である。場所は関東平野にあり東京湾に面している。
「東京」という名称を用いる構想は江戸時代後期の佐藤信淵の書にあり、大久保利通がその書の影響を受けつつ「東京」とすることを建言した。</p>
<p>1868年(慶応4年)に府制を施行、東京府となった。</p>
<p>1878年(明治11年)に伊豆諸島、1880年(明治13年)に小笠原諸島を編入。</p>
<p>1889年(明治22年)5月1日には、東京15区を東京府から分立して東京市とした。</p>
<p>1893年(明治26年)4月1日に、東京府及び神奈川県境域変更に関する法律により、多摩地域は神奈川県から東京府へ編入されてほぼ現在の東京都の境域が確定した。</p>
  
</div>
body {
  text-align: center;
  background: #fcfcfa;
  color: #818078;
  font-family: Futura, sans-serif;
}

.container {
  max-width: 50%;
  margin: 40px auto;
}

.hr-text {
  line-height: 1em;
  position: relative;
  outline: 0;
  border: 0;
  color: black;
  height: 1.5em;
  opacity: .5;
}
.hr-text:before {
  content: '';
  background: linear-gradient(to right, transparent, #818078, transparent);
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 1px;
}
.hr-text:after {
  content: attr(data-content);
  position: relative;
  display: inline-block;
  color: black;
  padding: 0 .5em;
  line-height: 1.5em;
  color: #818078;
  background-color: #fcfcfa;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.