我有一个p标签。我想在它旁边有一条边界线。
<p style="margin-left: -30px;font-size: 12px;margin-bottom: 2px;"><strong> Categories</strong></p>
我想在p标签旁边添加一行作为下图。
我该如何实施呢?
请帮忙, 感谢
答案 0 :(得分:5)
使用伪元素
<强> CSS 强>
p {
font-size: 12px;
margin-bottom: 2px;
overflow: hidden;
position: relative;
}
p:after {
content:"";
position: absolute;
border-bottom:1px solid grey; /* border-size & color are now controllable */
width:100%;
height:1em;
display: inline;
margin-left: 1em;
}
答案 1 :(得分:5)
还有很多其他方法可以实现这一点,其中一种方法是将border-bottom
应用于伪元素(为了防止重叠而建立新的块格式化上下文)并浮动{{1} }元素在左边:
<strong>
p.hasBorder {
overflow: hidden; /* Establish a new block formatting context */
}
p.hasBorder > strong {
float: left;
}
p.hasBorder:after {
content: "";
display: block;
border-bottom: 3px solid silver;
overflow: hidden; /* Establish a new block formatting context */
height: 1em; /* Up to you */
}
答案 2 :(得分:1)
p{
}
P:after{
content:'________';
}
答案 3 :(得分:1)
p {
font-size: 12px;
margin-bottom: 2px;
position:relative
}
p::after {
content:"";
border-bottom:1px solid grey;
width:100px;
position:absolute;
bottom:2px;
}
答案 4 :(得分:1)
p {
margin-left: 0px;
font-size: 12px;
margin-bottom: 2px;
position: absolute;
margin-top: -7px;
background-color: #fff;
color: #333;
padding-right: 5px;
}
.line-back {
border-bottom: 1px solid #ccc;
margin: 25px;
}
<div class="line-back">
<p>
<strong> Categories</strong>
</p>
</div