文字旁边的边框线

Question

我有一个p标签。我想要一个旁边的边界线。

<p style="margin-left: -30px;font-size: 12px;margin-bottom: 2px;"><strong> Categories</strong></p> 

我想添加一行旁边p标签，如下图。

我该如何实现它？

请帮帮忙， 感谢

Answer 1

使用伪元素

Jsfiddle Demo

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; 
} 

Answer 2

还有许多其他的方式来实现这一目标，其中之一是将一个border-bottom应用于伪元素（例如， stablishes以防止重叠的新块格式化上下文）和浮动<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 */ 
 
}

<p class="hasBorder"> 
 
    <strong>Categories</strong> 
 
</p>

Answer 3

p{ 

} 

P:after{ 
    content:'________'; 
} 

DEMO

Answer 4

JS Fiddle

p { 
    font-size: 12px; 
    margin-bottom: 2px; 
    position:relative 
} 
p::after { 
    content:""; 
    border-bottom:1px solid grey; 
    width:100px; 
    position:absolute; 
    bottom:2px; 
} 

Answer 5

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