Необходимо удалить границу по тексту

Question

У меня есть этот jsfiddle, который показывает мой текущий код, но он не служит мне хорошо. Я хочу, чтобы удалить границу, который ударяет мой текст

нужно иметь что-то вроде -------- какого-то текста -------

необходим также все пограничных сверху, снизу, слева и правый, а желтый цвет фона должен оставаться неповрежденным, я понимаю, что применение белой границы будет делать это, но я не хочу показывать белый фон для текста.

http://jsfiddle.net/1yb6jt1k/2/

<div class="row"> 
     <div class="col-sm-8 col-sm-offset-2"> 
      <div class="testing"> 
       <ul> 
        <li> 
         <label for="name">Some text but the border cuts it</label> 
        </li> 
       </ul> 
      </form> 
     </div> 
    </div> 





.testing{ 
    margin:50px auto; 
    background:transparent; 
    border-radius:4px; 
    padding:10px; 
} 

.testing li{ 
    display: block; 
    padding: 10px; 
    border:1px solid #000000; 
    margin-bottom: 0px; 
    border-radius: 4px; 

} 
.testing li > label{ 
    display: block; 
    text-align: center; 
    margin-top: -20px; 
    margin-left: auto; 
    margin-right: auto; 
    width: 40%; 
    color: green; 
    background-color: transparent; 
    font-size: 14px; 

} 

Answer 1

То, что вы пытаетесь сделать, может быть легко достигнуто с помощью fieldset и legend элементов:

<div class="testing"> 
    <fieldset> 
    <legend>Some text but the border cuts it</legend> 
    </fieldset> 
</div> 

Here is a deme.

Answer 2

Я понимаю, что не существует простой способ сделать это. Но вы можете использовать тег html fieldset. См here

Answer 3

Что об этом решении? С помощью псевдокласса и установите его так, чтобы он закрывал линию?

http://jsfiddle.net/kidkie/1yb6jt1k/4/

body { 
 
    background-color : yellow; 
 
} 
 
.testing{ 
 
    margin:50px auto; 
 
    background:transparent; 
 
    border-radius:4px; 
 
    padding:10px; 
 
} 
 

 
.testing li{ 
 
    display: block; 
 
    padding: 10px; 
 
    border:1px solid #000000; 
 
    margin-bottom: 0px; 
 
    border-radius: 4px; 
 

 
} 
 
.testing li > label{ 
 
    display: block; 
 
    text-align: center; 
 
    margin-top: -20px; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    width: 40%; 
 
    color: green; 
 
    background-color: transparent; 
 
    font-size: 14px; 
 
    position: relative; 
 
} 
 

 
.testing li > label span { 
 
    position: relative; 
 
    z-index: 2; 
 
} 
 

 
.testing li > label:before { 
 
    content: ""; 
 
    background: yellow; 
 
    height: 1px; 
 
    width: 100%; 
 
    display: inline-block; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 50%; 
 
    z-index: 1; 
 
}

<div class="row"> 
 
     <div class="col-sm-8 col-sm-offset-2"> 
 
      <div class="testing"> 
 
       <ul> 
 
        <li> 
 
        <label for="name"><span>Some text but the border cuts it</span></label> 
 
        </li> 
 
       </ul> 
 
      </form> 
 
     </div> 
 
    </div>