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

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

css html

Razvan Zamfir · 技术社区 · 5 年前

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

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

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

0 回复 | 直到 11 年前

Mohamed Fadl 4 年前

我大致是这样做的:通过设置一个 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 4 年前

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

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 4 年前

这是基于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 4 年前

最短和最好的方法:

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

<span> your text </span>

推荐文章

Jamie · 在CSS链接的文件名中添加Jinja占位符

1 年前

Mass · 如何在Tailwind CSS v4中创建配置

1 年前

magenta placenta · 将css变量合并为一个变量

1 年前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

1 年前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

1 年前

Ben Halicki · 带有垂直和水平滚动条的表,使用HTML/CSS/Bootstrap-5固定行和列

1 年前

Luckkks · 过渡色工作不正常

1 年前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

1 年前