下边框特定部分

Question

我有一个DIV的里面是一些描述一个H1标签，我就能够让一个底部边框整个H1标签，但如何让一个边框底部只是一个特定的它的一部分就像下面的代码片段一样。

添加SPAN标签的作品，但给人填充到边境加空格后它传播错误地打破了文本格式。

HTML：

<div class="row"> 
    <div class="col-md-4 text-center" id="column1"> 
     <h3 class=""> 
     <span>Responsive Web Design </span> 
     </h3> 
     <br /> 
     <br /> 
     <p> 
      Coupling aesthetic design sensibilities with. 
     </p> 
    </div> 

CSS：

#column1 > h3 > span{ 
border-bottom: 5px solid #16a085; 
padding-bottom: 20px; 
} 

我在做什么错在这里？

Answer 1

我用：伪elemnt添加边框的元素

/** = for better view not required */ 
 

 
.row { 
 
    text-align: center; 
 
    display: inline-block; 
 
    border: 1px solid red; 
 
} 
 

 
/** = end */ 
 
span { 
 
    display: block; 
 
    position: relative; 
 
    padding: 15px 0; 
 
} 
 
span:after { 
 
    content: ''; 
 
    position: absolute; 
 
    width: 30px; /* change as per your design */ 
 
    height: 2px; /* change as per your design */ 
 
    background: blue; /* change as per your design */ 
 
    bottom: 0; 
 
    left: 50%; 
 
    margin-left: -15px; 
 
}

<div class="row"> 
 
    <div class="col-md-4 text-center" id="column1"> 
 
    <h3 class=""> 
 
     <span>Responsive Web Design </span> 
 
     </h3> 
 
    <br /> 
 
    <br /> 
 
    <p> 
 
     Coupling aesthetic design sensibilities with. 
 
    </p> 
 
    </div>

Answer 2

好吧，我建议你去的第一个答案。但是，如果你发现这个pseudo事情有点混乱，然后尝试<hr>标签。给它一个固定的宽度，并把它放在标题下面。简单而干净。

见FIDDLE

#column1 > h3 > span{ 
 
padding-bottom: 20px; 
 
} 
 

 
.text-center hr{ 
 
    border-bottom: 5px solid #16a085; 
 
    width: 50px; 
 
    margin: 0 auto; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="row"> 
 
    <div class="col-md-4 text-center" id="column1"> 
 
     <h3 class=""> 
 
     <span>Responsive Web Design </span> 
 
     </h3> 
 
     <hr/> 
 
     <br /> 
 
     <br /> 
 
     <p> 
 
      Coupling aesthetic design sensibilities with. 
 
     </p> 
 
    </div>

Answer 3

使用CSS创建上方和下方的标题的间距取出<span>和<br>标签和风格<h1>。然后为该行添加一个伪元素。

我展示下面的示例伪元件上使用position: absolute。为确保其位置正确，请确保h1样式具有position: relative。

.container { 
 
    text-align: center; 
 
} 
 
h1 { 
 
    position: relative; 
 
    margin: 0 0 25px; 
 
    padding: 120px 0 25px; 
 
} 
 
h1::before { /* for the graphic */ 
 
    content: ''; 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 0; 
 
    transform: translateX(-50%); 
 
    display: block; 
 
    width: 100px; 
 
    height: 100px; 
 
    background: transparent url(https://cdn3.iconfinder.com/data/icons/communication-3/512/computer_phone_tablet-512.png) left top no-repeat; 
 
    background-size: contain; 
 
} 
 
h1::after { /* for the line below the h1 */ 
 
    content: ''; 
 
    position: absolute; 
 
    left: 50%; 
 
    bottom: 0; 
 
    transform: translateX(-50%); 
 
    display: block; 
 
    width: 50px; 
 
    border-top: 5px solid green; 
 
}

<div class="container"> 
 
    <h1>Responsive Web Design</h1> 
 
    <p>Lorem ipsum dolor sit amet sed umini.Lorem ipsum dolor sit amet sed umini.</p> 
 
</div>