html - 移动边框底部位置html

标签 html css

<分区>

我想将任何文本的边框稍微向上移动。请查看图片,以便您更好地理解我的问题。

我试过了 边框底部的CSS text-decoration: underline css property 但没有按预期工作。

请建议我如何实现。

谢谢 enter image description here

最佳答案

使用 :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/

上一篇:javascript - 关闭外部 div google maps api v3 中的信息窗口

下一篇:css - 浏览器放大改变我的 li 宽度

相关文章:

javascript - 返回 dom 节点的 window 对象属性?

javascript - 使 Canvas 具有形状响应

javascript - rails : change CSS property dynamically?

javascript - 单击链接时在导航中使用 jQuery - 转到目标页面,然后滚动到页面的特定部分

javascript - 如何在 JSON 文件中添加图像?

允许用户在页面上移动和调整 div 大小的 Javascript 库/框架/小部件

javascript - 主页文本区域更改

html - 很难设置边框图像

javascript - 如何将其转换为DataTable?

javascript - 使用 jquery 在文本框中仅输入数字和 "-"