我正试图在垂直行之前和之后的文本字段中添加一个伪样式,以用于样式设置。这些元素需要齐平到左-20px和右-20px的文本。
当文本作为内联块位于一行上时,这很好用,但是一旦文本跨越多行,宽度就会扩展到父级的宽度,并且伪元素距文本的距离不再仅仅是20px。 / p>
有没有一种方法可以使用CSS完成此任务?
.container {
width: 500px;
background-color: red;
text-align: center;
margin-left: 40px;
}
h2 {
position: relative;
display: inline-block;
margin: 0;
padding: 0;
background-color: blue;
color: white;
}
span {
position: relative;
background-color: green;
}
h2::before,
h2::after {
content: '';
position: absolute;
top: 0;
width: 4px;
height: 20px;
background: black;
}
h2::before {
left: -20px;
}
h2::after {
right: -20px;
}
<!-- Single line example works as the black bars are 20px away from the start/end of text-->
<div class="container">
<h2><span>This is a title</span></h2>
</div>
<br> <br>
<!-- double line doesn't work because the h2 is now the full width of the container -->
<div class="container">
<h2><span>This is loooonnggggggggggggggggggggggeeeeerrr</span></h2>
</div>
编辑:这是一个使用表格的工作版本,但是如果有人有更好的解决方案,我很想听听它:https://codepen.io/anon/pen/MqveLQ
答案 0 :(得分:0)
我已将您的代码移至这个小提琴:https://jsfiddle.net/n2Lr6xy5/13/并删除了position: absolute
,并去除了一些其他样式,因为它们似乎不必要,我认为我创造了您想要的东西。 / p>
这是更新 CSS:
.container {
width: 500px;
background-color: red;
text-align: center;
margin-left: 40px;
}
h2{
display: inline-block;
}
h2:after,
h2:before {
content: "";
width: 4px;
height: 20px;
background: #000000;
display: inline-block;
margin: 0 10px;
}
答案 1 :(得分:0)
所以从我可以看到的是,这里的问题是您在前后应用边框的位置。您需要更改边框的位置。从h2中删除它们,然后添加一个新的html元素,该元素将h2包裹起来并在其中应用。
例如:
<div class="container">
<div class="headerwrap">
<h2><span>This is loooonnggggggggggggggggggggggeeeeerrr</span></h2>
</div>
</div>
<div class="container">
<div class="headerwrap">
<h2><span>This is a title</span></h2>
</div>
</div>
CSS
.headerwrap::before,
.headerwrap::after {
content: '';
position: absolute;
top: 0px;
bottom:0;
margin:auto;
width: 4px;
height: 20px;
background: black;
}
.headerwrap::before {
left: 10px;
}
.headerwrap::after {
right: 10px;
}
这是一个有效的示例:https://codepen.io/FEARtheMoose/pen/VGbJjO?editors=1100#0
编辑:注释后已更改示例-https://codepen.io/FEARtheMoose/pen/VGbJjO