Question

我想问here提出的问题，但没有答案。有没有人对这个问题有答案？我想要一些看起来像这样的东西： example

问题是我有一张背景图片，我需要通过a元素显示图片，而不是边框。

<div class="info">
<a href="#">Some text</a>
</div>

Answer 1

您可以使用带有border-bottom（或顶部或背景）的伪元素。

为其添加一些布局，width为100%。

将width虚拟地减少为0，使用负margin。

如果需要，您可以将overflow:hidden设置为其容器。

<强> DEMO

伪元素可以被HTML中引入的任何内联块元素替换，具有相同的CSS值。

用于您提供给我们的HTML的CSS：

.info:after {
  content:'';
  display:inline-block;
  border-bottom:1px yellow solid;
  width:100%;/* you can tune it */
  margin-right:-100%;
  vertical-align:middle;/* set in middle aside text or inline-box */
}
.info {
  overflow:hidden;/* optionnal , but needed in most cases */
  background:#333; /* anything, image, gradient, color */
}

Answer 2

或者，您可能想尝试使用bootstrap：

这个我使用的小黑客

<强> HTML：

<body>
    <div class="container">
        <div class="row">
            <div class="col-xs-4"></div>
            <div class="col-xs-4">
               <a href="#">A text that breaks a line</a>
            </div>
        <div class="col-xs-4"></div>
    </div>
</body>

<强> CSS

body{
  background: url(http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/congruent_outline.png) repeat;
}
.row{
  margin-top: 100px;
  text-align: center;
}
 .row .col-xs-4:first-child
,.row .col-xs-4:last-child{
  border-top: solid 4px yellow;
}
.row .col-xs-4:nth-child(2){
  top: -14px;
}
.row .col-xs-4 a{
  font-size: 1.5em;
}

这是一个有效的JSFiddle： https://jsfiddle.net/flamedenise/7jseg0ck/10/

希望有所帮助：）

打破与文本css的边界

2 个答案: