在按钮旁边添加水平线

Question

我有一个按钮，我想在每侧添加白线。 无论我尝试什么，要么在按钮内添加一条线，要么只在一侧添加一条线。 我已经完成了文本旁边的行，但我在按钮的每一侧添加它们时遇到问题。

这是我的代码

HTML

<button class="inst-btn" type="submit">Find Classes Now!</button>

CSS

.inst-btn { text-transform: uppercase; width: 320px; margin: 60px 0 0 320px; background-color:#eb6623; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; outline: 0;  }
.inst-btn { font-size: 26px; color: #fff; padding: 5px 5px; margin: 0px; font-family: "arial"; border: 0px; margin-left: 310px; margin-top: 60px}

Answer 1

您可以使用以下方法创建包装元素并使用:before和:after位置伪选择器。这是我的意思的一个例子：

.inst-btn { 
  text-transform: uppercase; 
  width: 320px; 
  margin: 60px 0 0 320px; 
  background-color:#eb6623; 
  -moz-border-radius:5px; 
  -webkit-border-radius:5px; 
  border-radius:5px; 
  outline: 0;  
}
.inst-btn{ 
  font-size: 26px; 
  color: white; 
  padding: 5px; 
  margin: 0; 
  font-family: "arial"; 
  border: 0; 
}
.wrapper:before,.wrapper:after{
  content:" ";
  width: 100px;
  height: 2px;
  margin: 0 10px;
  vertical-align: super;
  background-color:grey;
  display:inline-block;
}

<div class="wrapper"><button class="inst-btn" type="submit">Find Classes Now!</button></div>

Answer 2

CSS的第二行需要一个封闭的括号，如果在填充后需要其余的代码：＆＃39;尝试使用一些引用来评论＆＃39; fff＆＃39; out然后在那里包含其余的代码。要么＆＃34;＆＃34;＆＃34; fff＆＃34;＆＃34;＆＃34;或者＆＃39;＆＃39; fff＆＃39;＆＃39;＆＃39;就足够了，我建议后者在代码中节省空间。

Answer 3

以下是此链接的答案：CSS technique for a horizontal line with words in the middle

    .inst-btn { display:inline-block;}
    .inst-btn:before,
    .inst-btn:after {
        border-top: 1px solid black;
        display: block;
        height: 1px;
        content: " ";
        width: 40%;
        position: absolute;
        left: 0;
        top: 1.2em;
    }

：before和：after元素绝对定位，所以我们可以向左拉一个，向右拉一个。此外，宽度（在这种情况下为40％）非常依赖于文本内部的宽度..必须考虑解决方案。至少顶部：1.2em确保线条或多或少保持在文本的中心，即使你有不同的字体大小。

这是小提琴:: http://jsfiddle.net/tUGrf/3/