代码之家 › 专栏 › 技术社区 › Razvan Zamfir

伪元素之前a&::的100%相对于什么进行测量?

css html

Razvan Zamfir · 技术社区 · 4 年前

我想做一个水平规则,在中间有一些文字。例如:

-----------------------------------我的标题在这里-----------------------------

在CSS中有这样的方法吗?显然没有所有的“-”破折号。

0 回复 | 直到 9 年前

Mohamed Fadl 3 年前

我大致是这样做的:通过设置一个 border-bottom 关于包含 h2 然后给予 h2 较小的 line-height 。然后将文本放入嵌套中 span 背景不透明。

h2 {
   width: 100%; 
   text-align: center; 
   border-bottom: 1px solid #000; 
   line-height: 0.1em;
   margin: 10px 0 20px; 
} 

h2 span { 
    background:#fff; 
    padding:0 10px; 
}

<h2><span>THIS IS A TEST</span></h2>
<p>this is some content other</p>

我只在Chrome中进行了测试,但没有理由它不适用于其他浏览器。

JSFiddle: http://jsfiddle.net/7jGHS/

Cloud 3 年前

在尝试了不同的解决方案后,我提出了一种适用于不同文本宽度、任何可能的背景且不添加额外标记的解决方案。

h1 {
  overflow: hidden;
  text-align: center;
}

h1:before,
h1:after {
  background-color: #000;
  content: "";
  display: inline-block;
  height: 1px;
  position: relative;
  vertical-align: middle;
  width: 50%;
}

h1:before {
  right: 0.5em;
  margin-left: -50%;
}

h1:after {
  left: 0.5em;
  margin-right: -50%;
}

<h1>Heading</h1>
<h1>This is a longer heading</h1>

我在IE8、IE9、Firefox和Chrome中测试了它。你可以在这里查看 http://jsfiddle.net/Puigcerber/vLwDf/1/

artsnr 2 年前

这是基于Flex的解决方案。

h1 {
  display: flex;
  flex-direction: row;
}
h1:before, h1:after{
  content: "";
  flex: 1 1;
  border-bottom: 1px solid;
  margin: auto;
}
h1:before {
  margin-right: 10px
}
h1:after {
  margin-left: 10px
}

<h1>Today</h1>

JSFiddle: https://jsfiddle.net/j0y7uaqL/

Gass 3 年前

最短和最好的方法:

span:after,
span:before{
    content:"\00a0\00a0\00a0\00a0\00a0";
    text-decoration:line-through;
}

<span> your text </span>

推荐文章

Softly · 单选按钮未按预期取值

1 年前

NovoMannen · 导航中的下拉菜单在内容后面重叠

1 年前

Thirumal isireddy · 在导航栏顺风css中,img被扭曲,而不是将元素推到旁边

1 年前

eXor420 · 如何在脚本标记中使用导出的函数?

1 年前

Hadi · 如何在无效和有效输入中选择用于更改样式的psoudo元素(after)

1 年前

IonicMan · 剑道网格在宽度过大时不显示某些列

1 年前

Kernier · 如何将数学公式支持添加到StacksEditor?

1 年前

Md. Ibrahim · CSS网格项溢出小屏幕滚动

1 年前

Arjun V Srivatsa · 如何将系统时区信息分配给javascript中的变量?

1 年前

Akshay mek · Vscode扩展建议不适用于某些文件夹

1 年前