段落の隣に丸い線を描く最も簡単な方法は何ですか？

Question

私は自分のテキストの横に縦線をしたい。私はちょうど左に垂直線を描くために 'border-left'を使うことができます、しかし、私はそれが角を丸める方法をまだ見つけませんでした。同じ目的を達成するために絶対位置擬似要素を使って

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>