伪选择器的重复内容值答案

【问题标题】：Repeat content value of pseudo selector伪选择器的重复内容值
【发布时间】：2014-07-03 03:11:50
【问题描述】：

在iA.net 的网站上，他们使用伪元素 :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（SASS）：

.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 中找到使用该分隔符执行任何操作的任何内容，或者我只是在寻找完全错误的地方。

有人知道他们在这里使用什么吗？我问是因为我想不通，我想做类似的事情。

【问题讨论】：

标签： javascript jquery html css css-selectors

【解决方案1】：

有趣的问题。我可能是错的，但我相当肯定这是正在发生的事情：

µ 符号被插入到页面中，但他们使用的是自定义字体，将这个符号显示为一系列点，大约 200 像素宽。因此，当他们在其中添加一堆符号时，它看起来就像一排非常大的点。然后他们只是将那条线滑过一堆，让overflow: hidden; 隐藏每一侧多余的点。

【讨论】：

确实是一个有效的想法，但这并不能解释为什么在关闭 javascript 时它不会呈现。字符 µ 仍然存在于 CSS 中。那么执行此操作的 JS 在哪里呢？我找不到它。
请注意，禁用 javascript 时文本上的字体呈现不同...fontCss.setAttribute("href", "http://cloudfront.ia.net/wp-content/themes/iA4-0.2/stylesheets/fonts-1-2.css"); 字体是在使用 javascript 加载的样式表中使用 @import 加载的。
我想这就能解开谜团了。非常感谢您对此的帮助。我想我必须想出类似的东西，但也许是 svg 或类似的东西。

【解决方案2】：

这里只是一个简化其复杂性的想法。

HTML

<div class="splitter">
   <span>work</span>    
</div>

CSS

body{
  text-align:center;
  margin: 50px;
}

.splitter{
  border-top:1px dotted #ccc;
  margin-top:20px;
  text-align:center;
}

.splitter span{
    position:relative;
    top:-10px;
    background-color:#fff;
    padding:0 20px;
    text-transform:uppercase;
}

【讨论】：