文字旁邊的邊框線

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