如何在元素底部居中一个小边框：before和：after？

我想在我的头条新闻网站上创建一个小边框。我正在使用伪元素之前和之后。代码有点特别，因为我正在调整我使用的模板的代码。这是这样的see fiddle 如何在元素底部居中一个小边框：before和：after？

问题是“左：48％;”属性：我已经手动设置了它，但取决于屏幕的大小，它可能是居中或不居中，因此它不响应。有没有办法让边框始终位于文字下方？

.headline p:before, 
 
.headline p:after { 
 
    position: absolute; 
 
    left: 48%; 
 
    display: block; 
 
    width: 70px; 
 
    border-bottom: 3px solid black; 
 
    content: ""; 
 
} 
 

 
h3 { 
 
    text-align: center; 
 
}

<div class="headline"> 
 
    <h3> 
 
    My title 
 
    </h3> 
 
    <p> 
 
    </p> 
 
</div>

来源

2017-03-10 DevBob

你为什么要强调这一段？不应该在'.headline'上设置吗？ –

如果文字很长，该怎么办？你想让下划线保持在70px？ – Abhitalks

是的下划线必须保持相同的大小，它是在该段落，因为这是主题是如何制作的，我试图不要从主题更改太多的代码 – DevBob

使用calc() CSS功能如下：

.headline p:before, 
 
.headline p:after { 
 
    position: absolute; 
 
    left: calc(50% - 35px); 
 
    display: block; 
 
    width: 70px; 
 
    border-bottom: 3px solid black; 
 
    content: ""; 
 
} 
 

 
h3 { 
 
    text-align: center; 
 
}

<div class="headline"> 
 
    <h3>My title</h3> 
 
    <p></p> 
 
</div>

来源

2017-03-10 10:57:40

给这个pseudoelement一个left和right财产 - 然后用margin: auto到中心。

.headline p:before, 
 
.headline p:after { 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    margin: auto; 
 
    display: block; 
 
    width: 70px; 
 
    border-bottom: 3px solid black; 
 
    content: ""; 
 
} 
 

 
h3 { 
 
    text-align: center; 
 
}

<div class="headline"> 
 
    <h3> 
 
    My title 
 
    </h3> 
 
    <p> 
 
    </p> 
 
</div>

fiddle

来源

2017-03-10 10:52:52 sol

@mplungjan - 添加 – sol

使用margin属性

重写代码为

.headline p:before, .headline p:after { 
margin: 0 auto; 
width: 70px; 
border-bottom: 3px solid black; 
content: ""; 
}

.headline p:before, 
 
.headline p:after { 
 
    margin: 0 auto; 
 
    display: block; 
 
    width: 70px; 
 
    border-bottom: 3px solid black; 
 
    content: ""; 
 
} 
 

 
h3 { 
 
    text-align: center; 
 
}

<div class="headline"> 
 
    <h3> 
 
My title 
 
</h3> 
 
    <p> 
 
    </p> 
 
</div>

来源

2017-03-10 10:56:12

只需使用保证金：汽车

.headline p:before, 
 
.headline p:after { 
 
    margin: auto; 
 
    display: block; 
 
    width: 70px; 
 
    border-bottom: 1px solid black; 
 
    content: ""; 
 
} 
 

 
h3 { 
 
    text-align: center; 
 
}

<div class="headline"> 
 
    <h3> 
 
    My title 
 
    </h3> 
 
    <p> 
 
    </p> 
 
</div>

来源

2017-03-10 10:57:11 chirag

如何在元素底部居中一个小边框：before和：after？

回答

相关问题