特定のセクションへのボトムボーダー

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>タグを試してみてください。固定幅を与えてタイトルの下に置きます。シンプルで清潔。

は、見出しの上および下の間隔を作成するためにCSSを使用して<span>と<br>タグやスタイル<h1>を削除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

を参照してください。次に、その行に擬似要素を追加します。

以下に示す例では、擬似要素に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>