サイドで行と追加アイコン付きのボックスを作成する方法

Question

入力側と出力側のラインがあるボックスを使用したいと思います。行にはクリック可能なアイコンが追加されています。どのように私はそのようなアイコンをクリック可能になるように設計することができますか？私は行とアイコンのsvgイメージを使用する必要がありますか？何が最善の方法ですか？私はそれがresponsiveであるように私はCSSを使用してみましたが、私は使用していた：前と：後と私はそれをクリック可能にすることはできません。

Answer 1

ここではこれが2つの擬似要素を使ってことはできませんflex

function addButtonClickHandler() { 
 
    alert('Add button clicked!'); 
 
} 
 

 
function deviceClickHandler() { 
 
    alert('Device clicked!'); 
 
} 
 

 
var addButtons = document.querySelectorAll('.add'); 
 
var devices = document.querySelectorAll('.device'); 
 

 
addButtons.forEach(function(addButton) { 
 
    addButton.addEventListener('click', addButtonClickHandler); 
 
}) 
 

 
devices.forEach(function(device) { 
 
    device.addEventListener('click', deviceClickHandler); 
 
})

.container { 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
.add { 
 
    display: inline-flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    min-height: 40px; 
 
    min-width: 40px; 
 
    border: 1px solid black; 
 
    border-radius: 50%; 
 
    cursor: pointer; 
 
    background-color: #4CAF50; 
 
} 
 

 
.add::before { 
 
    content: '+'; 
 
    color: white; 
 
    font-size: 2em; 
 
} 
 

 
.line { 
 
    flex: 1; 
 
    border-top: 1px solid black; 
 
    margin: auto 3px; 
 
} 
 

 
.device { 
 
    flex: 1; 
 
    min-height: 100px; 
 
    min-width: 100px; 
 
    padding: 20px 10px; 
 
    text-align: center; 
 
    border: 1px solid black; 
 
    border-radius: 5px; 
 
    cursor: pointer; 
 
}

<div class="container"> 
 
    <span class="add"></span> 
 
    <span class="line"></span> 
 
    <div class="device"> 
 
    Clickable device name 
 
    </div> 
 
    <span class="line"></span> 
 
    <span class="add"></span> 
 
</div>