Aligning line made with CSS

时间：2017-05-03 作者：robhob

我曾使用CSS创建标题，标题右侧有一条双线，但我很难弄清楚如何让右边的线对齐。enter image description here

我使用的CSS如下所示：span.fancy:after { content: ""; position: absolute; height: 5px; border-bottom: 1px solid #777272; border-top: 1px solid #777272; top: 0; width: 35em; margin-top: .35em; margin-left: 15px; }

我正在处理的页面可以在这里找到：https://diviplayground.com/bkia/

2 个回复
最合适的回答,由SO网友:Takebo 整理而成

不是最干净或最好的方式，但您可以简单地使用left:0；右：0；要使边框完全覆盖内容，请使用另一个具有相对位置、z索引和添加背景的标记包装文本，以重叠边框。

这里有一个例子：https://jsfiddle.net/23x380kh/

可以更改“padding right”值以修改所需的间距。

SO网友:domino

由于行是标题的一部分（意味着您在.fancy类中输入了：：after），因此考虑标题的宽度才是合理的。

我认为应该在h2中添加：：after，而不是在内部span元素中添加：：after。然后可以为跨度指定背景色。使其位于线条顶部，并用背景色将其隐藏。

标签： css   小码农  

相关推荐

在带有PHP的子主题中包含style.css

在里面https://codex.wordpress.org/Child_Themes 这是包含样式的最佳实践。css在子主题中，必须将下面的代码放入函数中。php的子主题，但将“父样式”替换为可以在函数中找到的父主题的参数。父主题的php。我在我的主题文件中找不到它，那里也没有多少代码。使用@import包含父主题样式表的方法不适用于我，放入文件的css不会在任何浏览器的站点上显示自己。function my_theme_enqueue_styles() { $parent_s