Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

HTML

            
              <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>
            
          
!

CSS

            
              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;
}

            
          
!

JS

            
              
            
          
!
999px

Console