CSS使用选择器::after将小边框底部添加到文本
CSS使用选择器::after将小边框底部添加到文本
提问于 2018-08-02 02:46:20
我需要使用选择器::after为我的文本添加一个小边框底部。
<h3>
Hello, this border is too long
</h3>
<h4>
Hello, this border should be small
</h4><h3>元素有一个正常的边框，填充了整个文本空间。但是我需要<h4>元素只有一个10px长度的边框。
基本上这就是我想要实现的：
所以我试着尝试一下CSS，但没有成功：
h3
{
border-bottom: 3px solid #000;
}
h4::after
{
content: '';
border-bottom: 3px solid #000;
width: 10px;
}回答 3
Stack Overflow用户
回答已采纳
发布于 2018-08-02 02:49:25
h3
{
border-bottom: 3px solid #000;
}
h4::after
{
content: '';
border-bottom: 3px solid #000;
width: 10px;
display: block;
}在伪元素上添加一个display: block;就可以做到这一点。
Stack Overflow用户
发布于 2018-08-02 02:56:54
h3
{
border-bottom: 3px solid #000;
}
h4{
display : inline-block;
}
h4::after
{
content: '';
border-bottom: 8px solid #000;
width: 52px;
display: block;
margin: 0 auto;
}<h3>
Hello, this border is too long
</h3>
<h4>
Hello, this border should be small
</h4>
Stack Overflow用户
发布于 2018-08-02 04:59:40
将伪元素设为块将有助于将其放在文本下面，并且为了获得更多的控制，您可以将其定位为相对的，以便来回移动行。
h4::after
{
content: '';
border-bottom: 3px solid #000;
width: 10px;
display: block;
position: relative;
left: 80px;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51640327
复制相关文章
相似问题