创建顶部和底部边框比格本身
问题描述:
我有一些文字小,我想有一个顶部和底部边框看起来像一个破折号,有点像这样:创建顶部和底部边框比格本身
-
texttext
-
我的代码组成的div
在里面有多个p
,所以我想短边界在div
左右。有没有一种方法来实现这一目标?
答
使用:before
和:after
伪元素:
.text {
position: relative;
text-align: center;
line-height: 20px;
padding: 5px;
}
.text:before,
.text:after {
transform: translateX(-50%);
position: absolute;
background: #000;
content: '';
width: 50px; /* change width to increase or decrease border */
height: 1px;
left: 50%;
top: 0;
}
.text:after {
top: auto;
bottom: 0;
}
<div class="text">Some text here</div>
+0
这很完美,谢谢! – DevBob
+0
@ Florian.C欢迎您) –
是...你有没有尝试过的东西? – DaniP
我通常会在询问SO之前尝试至少2或3个解决方案(正如您在我的个人资料中询问的每个问题中都可以看到的),但是这次我真的不知道从哪里开始 – DevBob