Question

我正在尝试使用CSS3创建一个带线性渐变的水平线。另外，我想在规则中间有一些文字。

我尝试过类似的东西：

.strike {
  display: block;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
}
.strike > span {
  position: relative;
  display: inline-block;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #333;
  font-size: 10px;
  line-height: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
}
.strike > span:before,
.strike > span:after {
  content: "";
  position: absolute;
  top: 50%;
  width: 9999px;
  height: 1px;
}
.strike > span:before {
  right: 100%;
  margin-right: 15px;
  background: -webkit-linear-gradient(right, #333333 100%, #333333 0%);
  background: -moz-linear-gradient(right, #333333 100%, #333333 0%);
  background: -ms-linear-gradient(right, #333333 100%, #333333 0%);
  background: -o-linear-gradient(right, #333333 100%, #333333 0%);
}
.strike > span:after {
  left: 100%;
  margin-left: 15px;
  background: -webkit-linear-gradient(left, #333333 100%, #333333 0%);
  background: -moz-linear-gradient(left, #333333 100%, #333333 0%);
  background: -ms-linear-gradient(left, #333333 100%, #333333 0%);
  background: -o-linear-gradient(left, #333333 100%, #333333 0%);
}

<div class="strike">
    <span>text</span>
</div>`

http://jsfiddle.net/LLztqgbn/

如您所见，渐变在左/右侧不起作用。

由于

将

Answer 1

问题是:before和:after伪元素的宽度。它们比窗口宽得多，所以如果你的渐变，你永远不会看到它的开始。

我建议按如下方式重新编写CSS：

删除:after元素并将:before移至父元素并修改如下：

.strike:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
 background: linear-gradient(to right, rgba(51,51,51,0) 0%,rgba(51,51,51,1) 50%,rgba(51,51,51,0) 100%);

}

给父母一个位置：

.strike {
  display: block;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
}

这将为您提供以下内容，我认为这与您尝试实现的内容非常接近。它还简化了你的代码，这总是一个奖励！

＆＃13;

.strike {
  display: block;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
}
.strike > span {
  position: relative;
  display: inline-block;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #333;
  font-size: 10px;
  line-height: 10px;
    padding: 10px;
  background: #FFF;
}
.strike:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(to right, rgba(51,51,51,0) 0%,rgba(51,51,51,1) 50%,rgba(51,51,51,0) 100%);
}

＆＃13;

<div class="strike">
    <span>text</span>
</div>

＆＃13;

CSS3带文本的渐变水平规则

1 个答案: