什麼是最簡單的方法來繪製段落旁邊的圓形線條？

Question

我想在我的文本旁邊有一條垂直線。我可以使用'左邊界'在左邊繪製一條垂直線，但我還沒有發現如何將它轉彎。下圖顯示了應該如何約：

Answer 1

使用絕對定位僞元素來達到同樣的目的。在下面的示例中，我使用的是絕對定位的::before，並將其設置爲父級的全高（使用top: 0; bottom: 0;技巧）。然後，您可以簡單地設置一個寬度並使用寬度的一半即可實現圓角的border-radius。

p { 
 
    position: relative; /* Required so that pseudo-element is positioned correctly */ 
 
    padding-left: 30px; /* Dummy value to make space for pseudo-element */ 
 
} 
 

 
p::before { 
 
    /* Create pseudo-element and give it content */ 
 
    content: ''; 
 
    display: block; 
 
    
 
    /* Position it in its parent so that it is: 
 
    * - to the left 
 
    * - occupies full height 
 
    */ 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
    
 
    /* Give it a fixed width and rounded corners */ 
 
    width: 10px; 
 
    border-radius: 5px; 
 
    
 
    /* Appearance */ 
 
    background-color: steelblue; 
 
}

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin metus tincidunt felis maximus, maximus sollicitudin mi ultrices. Curabitur libero arcu, bibendum ac suscipit ut, elementum scelerisque lacus. Praesent ultricies commodo porttitor. Fusce eget velit nisi. Praesent vulputate venenatis dui, efficitur sollicitudin nisi pulvinar a.</p>

Answer 2

試試這個：

.txt { 
 
    width: 400px; 
 
    position: relative; 
 
} 
 

 
.txt:before { 
 
    content: ''; 
 
    width: 10px; 
 
    height: 100%; 
 
    position: absolute; 
 
    background-color: skyblue; 
 
    border-radius: 5px; 
 
} 
 

 
p { 
 
    margin-left: 20px; 
 
}

<div class="txt"> 
 
<p> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin metus tincidunt felis maximus, maximus sollicitudin mi ultrices. Curabitur libero arcu, bibendum ac suscipit ut, elementum scelerisque lacus. Praesent ultricies commodo porttitor. Fusce eget velit nisi. Praesent vulputate venenatis dui, efficitur sollicitudin nisi pulvinar. 
 
</p> 
 
</div>