伪选择器的重复内容值

在iA.net的网站上，他们用伪元素创建了段分隔符：之前在分隔符的文本后面创建了一条很好的虚线。在这种情况下，它是帖子的时间戳和页脚“联系人”标题。伪选择器的重复内容值

我试图重新效果，我唯一能想出的是类似于是这样的：

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分离的东西，或者我只是在错误的地方寻找。

有人知道他们在这里使用什么吗？我问，因为我无法弄清楚，我想做类似的事情。

来源

2013-10-24 Mr.Mark

有趣的问题。我可能是错的，但我相当确定这是发生了什么事：

µ符号被插入到页面中，但它们使用的自定义字体显示此符号为一系列点，大约200px宽。所以，当他们添加一堆符号时，它看起来像是一个非常巨大的点阵线。然后他们只是将这条线滑过一堆，然后让每个边都隐藏多余的点。

来源

2013-10-24 20:08:14

确实有效的想法，但是这并不能解释为什么它当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或喜欢。 –

只是一个想法来简化它们的复杂性。

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

来源

2014-07-02 19:11:50 otis

伪选择器的重复内容值

回答

相关问题