具有灵活边框宽度的内联元素

Question

我正在尝试为一个内联元素创建一个视觉效果，这就是我想要的

但是使用内联元素，我无法想出如何使标题上方的红线具有弹性，这是我目前得到的结果: https://jsfiddle.net/1oLzzw6t/

<div><span class="info-w option1"><span class="info"><span>Batman vs Superman – O Coringa e o Charada quase apareceram no filme!</span></span></span></div>
<div><span class="info-w option2"><span class="info"><span>Batman vs Superman – O Coringa e o Charada quase apareceram no filme!</span></span></span></div>

body{
  padding: 5%;
  background: black;
}

.info-w{
  padding-right: 10%;
  position: relative;
  z-index: 1;
  .info{
    float: left;
    font-family: Helvetica;
    font-size: 24px;
    line-height: 1.2;
    font-weight: bold;
    color: black;
    >span{
      display: inline;
      background: #FFF;
      position: relative;
    }
  }
  &.option1{
    .info{
      >span{
        border-top: 3px solid red;
      }
    }
  }
  &.option2{
    .info{
      box-shadow: 0 -3px 0 red;
    }
  }
}

有人能帮我吗？

- Rafael Viana

Answer 1

你可以使用 ::first-line 伪元素并将 box-shadow 应用于它。 MDN 参考资料 ::first-line CSS 伪元素仅将样式应用于元素的第一行。第一行文本的数量取决于诸多因素，如元素的宽度、文档的宽度以及文本的字体大小。与所有伪元素一样，::first-line 不匹配任何真实的 HTML 元素。

p {
  display: inline-block;
  font-size: 24px;
  font-weight: bold;
  width: 80%;
}
p::first-line {
  box-shadow: 0 -3px 0 red;
}

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla numquam illum error unde amet atque, quasi debitis hic deserunt laboriosam!</p>

注意：

第一行只有在块级容器盒子中才有意义，因此 ::first-line 伪元素仅对具有 block、inline-block、table-cell 或 table-caption 显示值的元素产生影响。在所有其他情况下，::first-line 没有效果。

- Paulie_D

---

为什么这在Firefox和Firefox Developer中对我不起作用？ - xpy

Answer 2

::first-line伪元素仅适用于块级元素，正如您所说，但我需要使用内联块，以便文本具有背景，如下面的第二个示例所示。

body{
  background: #000;
  padding: 0 10%;
}

span {
  font-family: Arial;
  font-size: 24px;
  font-weight: bold;
  background: #FFF;
  color: #000;
  margin: 30px 0
}

.notpadded{
  display: block;
}

.notpadded::first-line {
  box-shadow: 0 -3px 0 red;
}

<span class="notpadded">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla numquam illum error unde amet atque, quasi debitis hic deserunt laboriosam!</span>

<span class="padded">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla numquam illum error unde amet atque, quasi debitis hic deserunt laboriosam!</span>

- Rafael Viana

Answer 3

我已经想出了如何做到这一点：http://codepen.io/rafaviana/pen/yOoOQr

body{
padding: 10% 30%;
}

.wrapper{
margin: 40px 0;
}

span, p {
display: inline-block;
font-size: 24px;
margin: 0;
}

span::first-line, p::first-line {
box-shadow: 0px -5px 0px 0px black;
}
i {
background-color: pink;
}

<div class="wrapper">
 <span><i>Lorem ipsum djdgn dgs dhgd hdb dhgsd sd sdhg d dshbsd hgds hd hdss hg d s hds</i></span>
</div>

<div class="wrapper">
 <p><i>Lorem ipsum djdgn dgs dhgd hdb dhgsd sd sdhg d dshbsd hgds hd hdss hg d s hds</i></p>
</div>

- Rafael Viana