1

iA.netの Web サイトでは、疑似要素 :before を使用してセクション区切りを作成し、区切りのテキストの後ろにきれいな点線を作成しました。この場合、それは投稿のタイムスタンプとフッターの「連絡先」ヘッダーです。

私は効果を再現しようとしていますが、似ているように見える唯一のものはこれです:

HTML:

<div class="post-meta post-timestamp">
    <div class="post-date">
        <time datetime="{{date format="YYYY-MM-DD"}}">{{date format='DD. MMMM YYYY'}}</time>
    </div>
</div>

CSS (サス):

.post-meta {
  padding: 2px 0 10px;
  color: #b3b3b1;
  .post-template & {
    border-top: 1px solid #ddd;
    margin: 0 0 1.8em;
  }
  .post-date,
  .tag-list {
    margin-bottom: 1em;
    margin-top: -0.8em;
    text-align: center;
  }
  .post-date time,
  .tag-list span {
    display: inline-block;
    background-color: $body-bg;
    padding: 0 1em;
    i {
      margin-right: 0.24em;
    }
  }
  .home-template & .tag-list span {
    display: inline;
  }
  li {
    display: inline;
  }
}

私が彼らのウェブサイトで見つけたものから、次のHTML / CSSがあります:

<h1 class="section_separator">
    <span>19. March 2013</span>
</h1>

CSS:

.section_separator {
  font-family: 'iABCRegularSC', Georgia, serif;
  text-transform: lowercase;
  position: relative;
  margin: 0 0 1.52381em 0;
  overflow: hidden;
  font-size: 1em;
  line-height: 1.14286em;
  text-align: center; }
  .section_separator a,
  .section_separator span {
    display: inline-block;
    position: relative;
    padding: 0 10px;
    z-index: 1;
    background-color: #fdfdfd;
    text-decoration: none; }
  .section_separator a:hover {
    text-decoration: underline; }

.section_separator:before,
.section_separator .before {
  font-family: 'iABCRegularSC', Georgia, serif;
  text-transform: lowercase;
  position: absolute;
  top: 0;
  left: -1000px;
  z-index: -1;
  overflow: visible;
  text-decoration: none !important;
  color: #111111;
  font-size: 1em;
  line-height: 1.14286em;
  letter-spacing: 2px;
  content: "µµµµµµµ"; }

私はしばらくこれを調べてきましたが、それを再現する方法を見つけることができません。JavaScriptをオフにするとセパレーターがレンダリングされないため、彼らもこれに一種のJavaScriptを使用していると確信していますが。しかし、そのセパレーターで何かをしているjavascriptには何も見つからないか、間違った場所を見ているだけかもしれません。

彼らがここで何を使っているか知っている人はいますか?よくわからないので同じようなことをしたいので質問させていただきます。

4

2 に答える 2