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

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工作在背景图像周围放置"阅读更多"文本.

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

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;
  }
}

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