HTML怎么让hr在文字右边居中,将居中文本添加到类似

---

的行的中间

在不知道宽度和背景颜色的情况下解决此问题的方法如下：

结构体

的CSS

.strike {

display: block;

text-align: center;

overflow: hidden;

white-space: nowrap;

}

.strike > span {

position: relative;

display: inline-block;

}

.strike > span:before,

.strike > span:after {

content: "";

position: absolute;

top: 50%;

width: 9999px;

height: 1px;

background: red;

}

.strike > span:before {

right: 100%;

margin-right: 15px;

}

.strike > span:after {

left: 100%;

margin-left: 15px;

}

示例：http：//jsfiddle.net/z8Hnz/

双线

要创建双线，请使用以下选项之一：

1)线间距固定

.strike > span:before,

.strike > span:after {

content: "";

position: absolute;

top: 50%;

width: 9999px;

border-top: 4px double red;

示例：http：//jsfiddle.net/z8Hnz/103/

2)行之间的自定义空间

.strike > span:before,

.strike > span:after {

content: "";

position: absolute;

top: 50%;

width: 9999px;

height: 5px; /* space between lines */

margin-top: -2px; /* adjust vertical align */

border-top: 1px solid red;

border-bottom: 1px solid red;

}

示例：http：//jsfiddle.net/z8Hnz/105/

SASS(SCSS)版本

基于此解决方案，我添加了“具有颜色属性”的SCSS，如果它可以帮助某人...

//mixins.scss

@mixin bg-strike($color) {

display: block;

text-align: center;

overflow: hidden;

white-space: nowrap;

> span {

position: relative;

display: inline-block;

&:before,

&:after {

content: "";

position: absolute;

top: 50%;

width: 9999px;

height: 1px;

background: $color;

}

&:before {

right: 100%;

margin-right: 15px;

}

&:after {

left: 100%;

margin-left: 15px;

}

}

}

使用示例：

//content.scss

h2 {

@include bg-strike($col1);

color: $col1;

}