divの片側だけの輪郭

Question

私はいくつか試しましたが、divの右側にアウトラインを作成する方法はありますか？ 以下の画像に紫色の線があります。 https://unsee.cc/geduzopi/

Answer 1

border-rightを使用できます。例えば

border-right: aqua 2pt solid;

はhttps://www.w3schools.com/cssref/pr_border-right.asp

Answer 2

親の外にプッシュするtranslateX()を使用し、その後、絶対親の右側に位置する擬似要素の使用を参照してください。

div { 
 
    display: inline-block; 
 
    width: 5em; 
 
    background: orange; 
 
    text-align: center; 
 
    position: relative; 
 
} 
 

 
div:after { 
 
    content: ''; 
 
    width: .5em; 
 
    background: purple; 
 
    position: absolute; 
 
    right: 0; top: 0; bottom: 0; 
 
    transform: translateX(200%);

<div>1</div>