ボタンを内側に入れる方法は？

Question

私が欲しいのは次のようなものです：

-------------------ボタン-------------- ----

私は行内にテキストを配置する方法を知っていますが、ボタンを置くとそれは良く見えません。なにか提案を？

Answer 1

afterとbeforeを使用して行を追加できます。

button { 
 
    padding: 0 100px; 
 
    overflow: hidden 
 
} 
 
button span { 
 
    display: inline-block; 
 
    position: relative; 
 
    height: 100%; 
 
} 
 
button > span:after { 
 
    content: ''; 
 
    border-bottom: 1px dotted #000; 
 
    height: 1px; 
 
    width: 1000%; 
 
    position: absolute; 
 
    left: calc(100% + 5px); 
 
    top: calc(50% - 1px); 
 
} 
 
button > span:before { 
 
    content: ''; 
 
    border-bottom: 1px dotted #000; 
 
    height: 1px; 
 
    width: 1000%; 
 
    position: absolute; 
 
    right: calc(100% + 5px); 
 
    top: calc(50% - 1px); 
 
}

<button type="button"> 
 
    <span>Button</span> 
 
</button>