<分区>
<分区>
我想将任何文本的边框稍微向上移动。请查看图片,以便您更好地理解我的问题。
我试过了 边框底部的CSS text-decoration: underline css property 但没有按预期工作。
请建议我如何实现。
谢谢
最佳答案
使用 :before
或 :after
示例 1
div{
text-align: center;
}
h1 {
padding: 0 20px;
position: relative;
text-align: center;
display: inline-block;
}
h1:before,
h1:after {
content:'';
width: 100%;
position: absolute; top: 50%;
height: 1px;
background: #555;
transform: translateY(-50%);
}
h1:before{
right: 100%;
}
h1:after{
left: 100%;
}
<div>
<h1>title h1</h1>
</div>
示例 2
h1 {
text-align: center;
margin: 15px 0;
}
h1:before,
h1:after {
content: '';
background: #222;
width: 50%;
display: inline-block;
vertical-align: middle;
height: 1px;
position: relative;
}
h1:before {
right: 10px;
margin-left: -50%;
}
h1:after {
left: 10px;
margin-right: -50%;
}
<div>
<h1>title h1</h1>
<h1>title h1 title h1</h1>
<h1>title h1 title h1 title h1</h1>
</div>
关于html - 移动边框底部位置html,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31077723/