Question

我正在尝试为内联元素this is what I want

创建视觉效果

但是使用内联元素我无法弄清楚如何使标题上方的红线变得灵活，这是我到目前为止所得到的：https://jsfiddle.net/1oLzzw6t/

h1

有人可以帮助我吗？

Answer 1

您可以使用:: first-line`伪元素并将box-shadow应用于该元素。

MDN Reference

::第一行CSS伪元素仅将样式应用于元素的第一行。第一行上的文本量取决于许多因素，例如元素的宽度，文档的宽度以及文本的字体大小。作为所有伪元素，:: first-line与任何真实HTML元素都不匹配。

＆＃13;

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

＆＃13;

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

＆＃13;

注意：

第一行仅在块容器框中有意义，因此:: first-line伪元素仅对显示值为block，inline-block，table-cell或table-caption的元素产生影响。在所有其他情况下，:: first-line无效。

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>

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>

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

3 个答案: