下边框小于width的标题 [英] Title with bottom border smaller than width
问题描述
我需要创建一个底部边框小于 h2
标题宽度的下划线效果。通常我不上传图片,但我认为这可能有助于进一步解释这个问题:
I need to create an underline effect with a bottom border that is smaller than the h2
title's width. Usually I don't upload images but I figure it might help explaining the question a bit further:
推荐答案
这是一个伪元素。 (示例)
You could use a pseudo-element for this. (example)
.pseudo_border {
position:relative;
display:inline-block;
}
.pseudo_border:after {
content:'';
position:absolute;
left:0; right:0;
top:100%;
margin:10px auto;
width:50%;
height:6px;
background:#00f;
}
只是绝对地放置一个相对于父元素的伪元素。从顶部
中定位 100%
,并使用 left:0; right:0
和用于水平居中的 margin
( auto
相应地修改元素的高度/宽度,并更改间距的 margin-top
。
Just absolutely position a pseudo-element relative to the parent element. Position it 100%
from the top
and use a combination of left:0; right:0
and a margin
of auto
for horizontal centering. Modify the height/width of the element accordingly and change the margin-top
for the spacing.
这篇关于下边框小于width的标题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!