重复伪选择器的内容值
Repeat content value of pseudo selector
本文关键字:选择器 更新时间:2023-09-26
在 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中使用该分隔符做任何事情的东西,或者我只是在找错的地方。
有人知道他们在这里用的是什么吗?我问是因为我只是想不通,我想做类似的事情。
有趣的问题。我可能是错的,但我相当确定这就是正在发生的事情:
µ
符号正在插入到页面中,但他们使用的是自定义字体,该字体将此符号显示为一系列点,大约 200px 宽。所以,当他们添加一堆这些符号时,它看起来像一条非常大的点线。然后他们只需将这条线滑过一堆,overflow: hidden;
隐藏每边多余的点。
这里只是一个想法,以简化它们的复杂性。
.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;
}
相关文章:
- Windows8应用程序(html&Javascript):从图片库(除了文件选择器)显示图像的另一种方式
- 在动态创建的元素上获取对特定选择器的引用
- AngularJS-在JSON选择器中使用变量名
- 每当您在选择器内移动鼠标时,悬停功能就会重复
- 使用CSS或js,使用动态选择器选择任意li的下一个元素
- jQuery最近父级的数据属性选择器
- 为什么不'在JQuery中找到第二个css选择器的工作
- 为什么 .focus() 不起作用,而 .css(“color”,“red”) 在同一个选择器上起作用
- jquery IE7中的第n个选择器
- Webdriver.io pageObject模式-通过传递参数来定义元素选择器
- jquery日期选择器年份范围默认值
- jquery日期选择器失去了交互性
- 正在搜索JavaScript日期选择器滑块
- 如何将返回的值应用于多个不同位置的多个选择器
- 每个选择器的Jquery css颜色都在变化,但字体大小却没有变化
- 如何在多个jQueryUI日期选择器中屏蔽特定日期
- jquery日期选择器显示与值不同的文本
- jQuery选择器无法正常工作
- 文档就绪提供了错误的选择器高度
- 未捕获的语法错误:无法在“文档”上执行“查询选择器”