在链接元素之前和之后添加水平线

Question

我想实现Read More按钮的以下外观：

除了读取旁边的行之外，还有以及伪元素之前和之后使用的更多单词。

添加线条的最佳方法是什么？

CSS / HTML / Demo

.read-more {
  background: red;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -khtml-border-radius: 50%;
  border-radius: 50%;
  width: 4rem;
  height: 4rem;
  display: block;
  margin: 0px auto;
  position: relative;
  font-size: 1.4rem;
  -moz-box-shadow: 1px 3px 7px 0px #aaa;
  -webkit-box-shadow: 1px 3px 7px 0px #aaa;
  box-shadow: 1px 3px 7px 0px #aaa;
}
.read-more::before {
  content: "read";
  color: red;
  position: absolute;
  top: 50%;
  left: -3.2rem;
  margin-top: -0.75rem;
}
.read-more::after {
  content: "more";
  color: red;
  position: absolute;
  top: 50%;
  right: -3.2rem;
  margin-top: -0.75rem;
}
.read-more img {
  width: 60%;
  margin: 0px auto;
  position: absolute;
  top: 50%;
  margin-top: -.60rem;
  left: 50%;
  margin-left: -1.15rem;
}

<a class="read-more" href="#">
  <img src="http://i.stack.imgur.com/jT5el.png">
</a>

Answer 1

让我们尽可能地保持语义：

• CSS中的装饰图片
• HTML中的链接文字
• 用于创建这些行的伪元素
• em单位以保持一切顺利

有了这些，我们就可以通过一个HTML元素获得很好的结果：

<a href="#">Read More</a>

演示

否定text-indent与word-spacing一起工作以放置＆＃34;阅读更多＆＃34;背景图片周围的文字。

@media用于在视口变宽时增加线条长度

＆＃13;

＆＃13;

a {
  font-family: helvetica;
  background: #E20025 url(http://i.stack.imgur.com/jT5el.png) center no-repeat;
  border-radius: 50%;
  width: 50px;
  display: block;
  white-space: nowrap;
  padding: 1em 0 1em 0;
  text-indent: -3em;
  word-spacing: 4em;
  text-decoration: none;
  margin: 0 auto;
  position: relative;
  color: #E20025;
  box-shadow: 0 0 5px;
}
a:before,
a:after {
  content: '';
  height: 1px;
  background: #CCC;
  width: 7em;
  display: block;
  position: absolute;
  height: 2px;
  top: 1.5em;
}
a:before {
  left: -11em;
}
a:after {
  right: -11em;
}
/*Modify @media as required*/
@media only screen and (min-width: 515px) {
  a:before,
  a:after {
    width: 9em;
  }
  a:before {
    left: -13em;
  }
  a:after {
    right: -13em;
  }
}
@media only screen and (min-width: 570px) {
  a:before,
  a:after {
    width: 10em;
  }
  a:before {
    left: -14em;
  }
  a:after {
    right: -14em;
  }
}
@media only screen and (min-width: 620px) {
  a:before,
  a:after {
    width: 12em;
  }
  a:before {
    left: -16em;
  }
  a:after {
    right: -16em;
  }
}
@media only screen and (min-width: 800px) {
  a:before,
  a:after {
    width: 17em;
  }
  a:before {
    left: -21em;
  }
  a:after {
    right: -21em;
  }
}

＆＃13;

<a href="#">Read More</a>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我认为你不能使用“内容”。你可以在之前和之后使用“border”元素，或者使用JavaScript。：

jQuery("href").append("<hr>");

Answer 3

这是jsfiddle

代码

HTML

<div id="wrapperdiv">
  <div id="somediv"></div>
  <a class="read-more" href="#"><img src="..."/></a>
</div>

CSS

#wrapperdiv {
  position: relative;
}
#somediv {
  border: 1px solid #000;
  position: absolute;
  top: 50%;
  width: 100%;
  z-index: 1;
}
.read-more {
  background: red;
  z-index: 2;
  ...
}
.read-more::before {
  ...
  background-color: #FFF;
}
.read-more::after {
  ...
  background-color: #FFF;
}